React Native中messages State始终为空，求解决方法

问题根源 #

• React的setState是异步操作，调用setMessages后不会立刻更新messages状态，所以你在getMessages里调用完setMessages就打印messages，拿到的还是更新前的空数组。
• useEffect里同步调用getMessages和processMessages，但getMessages是异步函数（含await），调用后会先去执行API请求，此时processMessages已经先执行了，自然拿不到数据。

修复步骤 #

1. 调整processMessages的执行时机 #

不要在useEffect里直接同步调用processMessages，而是等API请求完成、拿到数据后再执行。可以直接在getMessages里拿到response后调用processMessages，或者把response作为参数传给它：

async function getMessages() {
  try {
    let request = {
      "token": auth,
      "offset": offset,
      "limit": limit,
    };

    const response = await network('my URL API', request);
    // 先处理数据，再更新状态
    processMessages(response);
    // 用函数式更新确保拿到最新的旧状态
    setMessages(prev => [...prev, ...response]);
  } catch (err) {
    console.log(err)
  }
}

function processMessages(msgData) {
  console.log(msgData); // 这里就能拿到最新的消息数据
  // 你的消息处理逻辑...
}

2. 正确查看更新后的messages状态 #

如果想确认messages是否更新成功，不要在setMessages后立刻打印，而是用useEffect监听messages的变化：

useEffect(() => {
  console.log('当前messages状态:', messages);
  // 如果需要每次messages更新后都处理，也可以把processMessages放在这里
  // processMessages(messages);
}, [messages]);

3. 修正useEffect的执行逻辑 #

原来的useEffect里不需要同时调用两个函数，只需要调用getMessages即可：

useEffect(() => {
  getMessages();
}, []);

可选：函数式更新确保状态正确 #

当你需要基于之前的状态追加新消息时，用函数式更新可以避免闭包导致的旧状态问题：

setMessages(prevMessages => [...prevMessages, ...response]);

内容的提问来源于stack exchange，提问作者Alexey