Question

我正在从子组件的useEffect挂钩更新父组件的状态。跟随是子组件的一部分代码。在这里，useEffect被调用了两次。不确定如何避免这种情况。

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

Answer 1

下面的代码将解决此问题：

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

Answer 2

您未在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);
  }
}

Answer 3

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

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

3 个答案: