Question

我在这里构建的是一个使用钩子的简单待办事项应用程序有两个输入字段和一个提交按钮。提交时，我将输入内容保存在数组中并将其存储在异步存储中。使用检索功能，我正在获取值并将其显示在列表形式的视图组件中。

useEffect(() => {
  // AsyncStorage.clear();
  retrieveData();
}, [data]);

const retrieveData = async () => {
  try {
    const valueString = await AsyncStorage.getItem("user");
    const value = JSON.parse(valueString);
    setData(value);
  } catch (error) {
    console.log(error);
  }
};

从useEffect中删除数据元素不会更新组件，并且不会显示数组中更新的当前值。仅在将另一个文本添加到数组中之后，它才会显示，并且以后添加到数据中也是如此。但是该应用程序不能确定是否挂起。

感谢您的帮助

Answer 1

只要更改useEffect，您的data钩子就会运行。（因为它在依赖项列表中）。

但是，在您的useEffect中，您呼叫retrieveData，后者又呼叫setData(value);。

这将更新data。反过来又会触发useEffect。

如果您只想在启动时调用一次retrieveData，则可以清空依赖项列表，其作用类似于componentDidMount。

Answer 2

您正在将[data]作为第二个参数传递给依赖关系列表useEffect。
这就是它无限循环的原因。将其更改为[]，它将仅运行一次。

useEffect(() => {
    // AsyncStorage.clear();
    retrieveData();
  }, [data]);

useEffect挂钩正在循环运行并挂起应用程序

2 个答案: