React Hooks：具有依赖性的 useEffect 在组件安装时也会被调用

Question

在 React 中，您可以使用 useEffect() 挂钩并依赖它。

const [data, setData] = useState();

useEffect(() => {
    console.log(data.test.test);
}, [data]);

所以我假设这个 useEffect 只是在数据更改时调用。因此，假设我会进行 api 调用并使用 setData(response.data).

然后 useEffect() 应该被触发，因为 data 状态是一个依赖项。

那么 console.log(data.tes.test) 就会起作用，因为我得到了正确的数据。但是，我收到一个 undefined 错误，这是因为最初也调用了 useEffect()。

我怎样才能避免这种情况？这很烦人，在我看来，添加依赖项并不是一个好的设计。

Answer 1

你有两个解决方案。正如@Woohaik 已经提到的，检查 useEffect 中的数据是否存在。我会实施守卫：

useEffect(() => {
  if (!data) return
  console.log(data.test.test)
}, [data])

useEffect(() => {
  console.log(data?.test?.test)
}, [data])

React Hooks: useEffect with dependecy also called when component mounts