无法从其他组件的函数体内部更新组件警告

Question

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

<parent>
    <component4 />
    <component3 />
    <component2 />
    <component1 />
</parent>

const component1 = () => {
    const [inView, setInView] = React.useState(false);
    const [loading, error, data] = fetchData(inView); // hook to fetch data
    // data is an array
    const content = data.map(d => <div>{d}</div>);
    const showEmpty = true;
    if (data) {
        showEmpty = false;
    }
    return (<InView>
        {({ inView, ref }) => {
              setInView(inView);
              return (
                <div ref={ref}>
                <div>{!showEmpty && content}</div>
                </div>
            )   
    </InView>);
}

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>
  );
}

而且，这只会获取一次数据。