从差异屏幕渲染useEffect/Async函数

Question

我有一个async function和一个只取一次数据的useEffect。

const [data, setData] = useState([]);
async function fetchData() {
fetch(`${baseURL}api/v1/data/${userId}`)
.then((response) => response.json())
.then((response) => {
try {
if (response.length > 0) {
setData(response);
} else {
setData([]);
// console.log(response);
}
} catch (err) {
console.log('no response');
alert(err);
}
});
}
useEffect(() => {
fetchData();
}, [userId, data]);

我可以在使用效果时删除数组，但如果我这样做，它将始终运行函数。所以当我打开屏幕时，它会获取最新的数据。然而，如果我想从不同的屏幕添加新数据，它不会触发async或useEffect函数。我应该如何告诉RN有新数据？AsyncStorage能工作吗？从一个屏幕更新数据并在此处应用数据？我愿意就如何进行提出建议。

我所说的不同屏幕的意思是：注册屏幕和查看屏幕。在这种情况下，在打开注册屏幕之前，我已经打开了视图屏幕，因此视图屏幕已经呈现。

Answer 1

在React Navigation和大多数导航库中，当屏幕导航到另一个屏幕时，屏幕不会从堆栈中卸载。例如，如果你有一个东西的列表，然后你按下"+"按钮导航到"；新项目"；屏幕上添加一个新的，当你按下后退按钮时，从上一个"；列表"；屏幕没有从堆栈中卸载，useEffect不会被触发，您也不会得到新的数据。

对于这种情况，有几个解决方案：

• 您可以将数据保持在全局状态，当您从另一个屏幕更新项目时，在成功调用API后，您还可以更新全局状态。您可以为此查找React Context、MobX或Redux
• 您可以通过回调将父屏幕的状态从一个屏幕传递到另一个屏幕，如果它们彼此之间没有那么大的距离。因此，在"；新数据"；屏幕，您也可以调用该回调函数来更改父屏幕的状态
• 第三，也是IMO最好的方法是使用React Navigation本身称为useFocusEffect的钩子：https://reactnavigation.org/docs/use-focus-effect

我希望这些会有所帮助。