UseEffect 挂钩在更新状态时执行多次答案

【问题标题】：UseEffect hook executes multiple times on updating stateUseEffect 挂钩在更新状态时执行多次
【发布时间】：2019-12-27 01:33:18
【问题描述】：

我正在从子组件的 useEffect 挂钩更新父组件的状态。以下是来自子组件的一段代码。这里 useEffect 被调用了两次。不知道如何避免。

useEffect = () => { const flag = someApi; setStateOfParent(flag),[]}

【问题讨论】：

您能否发布父组件和子组件的代码框链接或代码？

标签： reactjs react-hooks

【解决方案1】：

以下代码将解决此问题：

useEffect(() => {
  // executed only once
}, [])

【讨论】：

【解决方案2】：

您绝对应该避免在useEffect 中设置状态，因为它会触发新的渲染。此外，如果您指定效果依赖项，您将可以更好地控制它，并确保仅当其中一个依赖项发生更改时才会执行。

【讨论】：

【解决方案3】：

您没有在 useEffect 中设置状态。创建一个从 API 获取数据的函数，在该函数的 useEffect 和 setState 中调用它。您可以查看下面的示例代码。

useEffect(() => {
  getImage();
}, []); // Calling getImage function to fetch data

const [items, set] = useState([]);

async function getImage() {
  try {
    const response = await axios.get("https://picsum.photos/v2/list");
    let image = response.data;

    for (var i in image) {
      let x = "https://picsum.photos/id/";
      let y = image[i].id;
      let v = image[i].width;
      image[i].author = `${x}${y}/${v}/${image[i].height}`;
      image[i].height = Math.floor(Math.random() * 650) + 300;
      let z = image[i].height;

      image[i].download_url = `url(${x}${y}/${v}/${z})`;
    }
    set(image); // setting state after fetching data
  } catch (error) {
    console.error(error);
  }
}

【讨论】：

我尝试从 useEffect 调用我的函数，正如您所提到的，它仍然被多次调用。因此，如果我注释更新父组件状态的代码 useEffect 只会调用一次。