函数式组件中，函数内多重调用如何获取最新的 state 值？

[rateltalk]

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]);

[KMpAn8Obw1QhPoEP]

你这不无限递归了吗

[ewiglicht]

https://zh-hans.react.dev/learn/state-as-a-snapshot

[tY3N62hFz90E74bK]

2 楼的文档已经很完整的解释了原理，关于你这个场景，使用回调函数的方式去更新状态可以保证每次的 state 为最新

appendMsg((prevState) => {
// ... 在这里做一些状态的改变，之后 return 出想要修改的状态，记得读取的状态要来自 prevState
})

[leroy20317]

useRef

[rateltalk]

@enchilada2020 #1 openai funtion calling 就是递归吧，只有匹配到 function ，就递归

[296727]

https://ahooks.gitee.io/zh-CN/hooks/use-latest

[rateltalk]

@daydreamcafe #3 appendMsg 是第三方库（ chatUI ）导出的一个方法，只接收新的 msg 对象，貌似做不了回调函数这样的调用。

[Leviathann]

message 这个值或者引用是栈上变量，每次重新渲染，函数重新被调用，它的调用栈帧都是新的，也就是说旧的变量一旦捕获就不会随着组件的重新渲染而变更

解决方法就是把它的值放在堆上，用一个不变的引用关系去指向它，在 react 里，这是 ref

[Leviathann]

另外传入 useEffect 的 callback 是在渲染完成后执行，本意也并不是用来 watch ，你是否需要这个延迟？

[rateltalk]

@Leviathann #9 没懂，哪里加延迟？是 useEffect 里加延迟吗。

[oppt]

把 message 作为参数传进 fun2
function func2(messages) {
console.log(messages);
const newMessages = {xx}
appendMsg(newMessages);
func2(newMessages);
}

[rateltalk]

@oppt #11 靠传递参数是不行的

[amlee]

不对啊，楼上这么多回答的，你们都清楚 op 代码中的 useMessages 是一个什么样的 hook ？

[magicdawn]

用 useMomoizedFn 以前叫 usePersistFn, 也是社区流产的 useEvent 或 useEventCallback

[rateltalk]

@magicdawn #14 这个也是 ahook 中提供的，为了减少引用库的数量，用 ref 处理了。

[KgM4gLtF0shViDH3]

@ewiglicht 你是怎么发现官方的中文文档的，没找到任何切换语言的地方。

[ewiglicht]

@bestkayle 谷歌搜索

[KgM4gLtF0shViDH3]

@ewiglicht 还真有，我用英文搜就搜不到。。。