React Native Expo中列表在页面加载及添加任务后无法更新的问题求助

兄弟，我太懂这种卡好几天摸不着头脑的滋味了！咱们来拆解你的代码，把列表加载和更新的问题一个个解决掉。

一、页面加载时列表不显示的核心问题 #

你在useEffect里同时调用了jsonToken()和MessageLoad()，但jsonToken是异步函数——它要等AsyncStorage.getItem拿到token才会更新jsonValue，可MessageLoad根本不等它，直接就发请求了！这时候token里的参数还是空字符串，后端自然返回不了任务数据。

解决办法：把两个异步操作串起来，等token拿到手再去加载任务。可以在useEffect里封装一个异步初始化函数：

useEffect(() => {
  const initData = async () => {
    await jsonToken(); // 先等token获取完成
    await MessageLoad(); // 再发起任务列表请求
  };
  initData();
}, []);

同时优化jsonToken函数，直接处理返回值，避免多余的状态更新：

const jsonToken = async () =>{
  const storedToken = await AsyncStorage.getItem('@storage_token');
  setjsonValue(storedToken ? storedToken.replace(/['"]+/g, '') : '');
};

二、添加任务后列表不更新的问题 #

现在你的Postmessage发送完POST请求就完事了，没有通知页面去重新拉取最新的任务列表，所以添加完任务页面还是旧数据。

解决办法：在POST请求成功的回调里调用MessageLoad()，主动刷新列表：

const Postmessage = () => {
  axios.post(`${baseUrl}`, configData)
  .then(res => {
    console.log(res.data);
    MessageLoad(); // 请求成功后立刻重新加载任务列表
  })
  .catch(function (error) {
    console.log('Сервер ', error);
  })
}

三、setObject的异步状态更新问题 #

你在MessageLoad里写了：

setmessage(res.data.response.tasks)
setObject(Object.values(message));

但setmessage是异步更新状态的，刚调用完setmessage，message还是旧的状态值，所以Object.values(message)拿到的不是新数据，object状态也不会更新正确。

推荐解决办法：用useEffect监听message的变化，自动更新object，逻辑更清晰：

// 每当message更新，自动处理并更新object
useEffect(() => {
  setObject(Object.values(message));
}, [message]);

const MessageLoad = () =>{
  // 每次请求前生成最新的token，避免jsonValue更新后token还是旧的
  const requestToken = {
    params:{
      token: typeof jsonValue === 'string' ? jsonValue.replace(/['"]+/g, '') : '',
    }
  };

  axios.get(`${baseUrl}`, requestToken)
  .then(res => {
    setmessage(res.data.response.tasks); // 只更新message，剩下的交给useEffect处理
  })
  .catch(function (error) {
    console.log(error);
  })
}

另外，把token的生成移到MessageLoad内部，能保证每次请求都用最新的jsonValue，避免因为状态更新不及时导致的token失效问题。

按照上面的修改，应该就能解决页面加载时列表不显示、添加任务后列表不更新的问题了，你可以试试！

备注：内容来源于stack exchange，提问作者Artur Fik