Question

我编写了一个名为component1的组件，如下所示，它在父组件内部。 component1位于页面底部，除非用户向下滚动到该区域，否则我不想渲染它。因此，我使用来自“ react-intersection-observer”的InView来确定该区域是否在视图中。如果是这样，则获取数据并渲染数据。但是我得到警告：警告：无法从其他组件的函数体内更新组件。得到此警告的原因是什么？是因为我在组件中设置了setInView吗？

func

Answer 1

据我了解，您希望在组件正确进入视图时获取数据？

这是我对useEffect的解决方案：

const Componet1 = () => {

  const [inView, setInView] = useState(false)
  const [myData, setMyData] = useState(null)

  useEffect(() => {
    if (inView && !myData) {
      const [loading, error, data] = fetchData(inView); // hook to fetch data
      if (data) {
        setMyData(data)
      }
    }

    return () => {
      // cleanup
    }
  }, [inView,myData])

  return (
    <InView as="div" onChange={(inView) => setInView(inView)}>
      {myData ? myData.map((d, i) => <div key={i}>{d}</div>) : 'Loading...'}
    </InView>
  );
}

这也只获取一次数据。

无法从其他组件警告的功能体内更新组件

1 个答案: