react 函数式组件中，在 func1 函数内调用 func2 ，func2 更新 messages 后，再调用 func2 ，此时 func2 内打印的 messages 值还是个初始值？
场景是使用 openai function call 的时候。
代码如下：
export default function xx(props) {
const { messages, appendMsg } = useMessages(initialMessages);
function func1() {
func2();
}
function func2() {
console.log(messages);
appendMsg({xx});
appendMsg({yy});
func2();
}
return (
<button onClick={func1}>Call func1</button>
);
}
用useRef获取了最新的state值：
const messagesRef = useRef(messages);
useEffect(() => {
messagesRef.current = messages;
}, [messages]);
 |
KMpAn8Obw1QhPoEPJun 26, 2023 via Android
1
你这不无限递归了吗
|
 |
ewiglichtJun 26, 2023
2
|
 |
tY3N62hFz90E74bKJun 26, 2023
3
2 楼的文档已经很完整的解释了原理，关于你这个场景，使用回调函数的方式去更新状态可以保证每次的 state 为最新
appendMsg((prevState) => { // ... 在这里做一些状态的改变，之后 return 出想要修改的状态，记得读取的状态要来自 prevState }) |
 |
4
useRef
|
 |
5
@enchilada2020 #1 openai funtion calling 就是递归吧，只有匹配到 function ，就递归
|
 |
6
|
|
7
@daydreamcafe #3 appendMsg 是第三方库（ chatUI ）导出的一个方法，只接收新的 msg 对象，貌似做不了回调函数这样的调用。
|
 |
LeviathannJun 26, 2023
8
message 这个值或者引用是栈上变量，每次重新渲染，函数重新被调用，它的调用栈帧都是新的，也就是说旧的变量一旦捕获就不会随着组件的重新渲染而变更
解决方法就是把它的值放在堆上，用一个不变的引用关系去指向它，在 react 里，这是 ref |
|
LeviathannJun 26, 2023
9
另外传入 useEffect 的 callback 是在渲染完成后执行，本意也并不是用来 watch ，你是否需要这个延迟？
|
|
10
@Leviathann #9 没懂，哪里加延迟？是 useEffect 里加延迟吗。
|
 |
opptJun 26, 2023
11
把 message 作为参数传进 fun2
function func2(messages) { console.log(messages); const newMessages = {xx} appendMsg(newMessages); func2(newMessages); } |
 |
amleeJun 27, 2023
13
不对啊，楼上这么多回答的，你们都清楚 op 代码中的 useMessages 是一个什么样的 hook ？
|
 |
magicdawnJul 4, 2023 via Android
14
用 useMomoizedFn 以前叫 usePersistFn, 也是社区流产的 useEvent 或 useEventCallback
|
 |
KgM4gLtF0shViDH3Aug 8, 2023
16
@ewiglicht 你是怎么发现官方的中文文档的，没找到任何切换语言的地方。
|
|
KgM4gLtF0shViDH3Aug 10, 2023
18
@ewiglicht 还真有，我用英文搜就搜不到。。。
|
1
Select Language