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

【问题标题】：Render useEffect/Async function from a difference screen从差异屏幕渲染 useEffect/Async 函数
【发布时间】：2021-06-25 20:42:50
【问题描述】：

我有一个 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 会工作吗？从一个屏幕更新数据并在此处应用数据？我愿意接受有关如何进行的建议。

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

【问题讨论】：

你使用哪个导航库？
对不起。我也是 RN 的新手，所以我只能提供一个解释。我的意思是，例如，注册屏幕和查看屏幕。
@Erinç, react-navigation/native

标签： react-native

【解决方案1】：

在 React Navigation 和大多数导航库中，当导航到另一个屏幕时，屏幕不会从堆栈中卸载。例如，如果您有一个列表，然后按“+”按钮导航到“新项目”屏幕以添加新项目，当您按后退按钮时，因为之前的“列表”屏幕没有从堆栈，useEffect 不会被触发，也不会得到新的数据。

这种情况有两种解决方案：

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

我希望这些会有所帮助。

【讨论】：