如何在React中消除useEffect的缺失依赖警告

Question

从“反应”中导入{useEffects， useState}；

常量使用斯皮斯 = （） =

useEffect(() => {
    fetch("http://localhost:5000/spices")
        .then(res => res.json())
        .then(data => setSpices(data))

});
return [spices, setSpices];

}

导出默认使用小工具;

Answer 1

依赖数组告诉< code>useEffect何时运行:

useEffect(() => {
  // do smth
}, [var1, var2 ...]);

每当该数组中的任何变量（var1等）发生变化时，它都会导致use效中的代码执行。如果您不提供此数组，use效会在每次渲染时执行其代码。

你可以这样做:

function MyFetch(url) {
  const [data, setData] = useState();

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
}

然后你可以这样使用它：

export default function App() {
  const data = MyFetch("https://jsonplaceholder.typicode.com/todos/1");
  console.log(data[0]);

  return (
    <div>
      {Object.keys(data[0]).map((key) => (
        <div>
          {key} - {data[0][key] + ""}
        </div>
      ))}
    </div>
  );
}

useffect是一个棘手的问题useffect在每次渲染后运行（因为您没有依赖数组），并且setState会导致重新渲染，因此从usaffect内部设置状态时必须小心一点。目前，在您的代码中，发生的情况是：

1. 使用效果运行
2. setState被执行，这会导致重新渲染
3. useEffects再次运行，因为重新渲染

为了避免这种情况，不要从< code>useEffect内部更新会触发< code>useEffect重新运行的内容。

这里是沙盒链接:https://codesandbox.io/s/determined-goldstine-jx1r81?file=/src/App.js:280-567

我看到您正在返回＜code＞setPices＜code＞函数，您的目标是什么？如果您希望＜code＞useSpices就足够了，但我想不出为什么您也要返回＜code＜setscies