1

我编写了一个名为 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>);
}
4

1 回答 1

0

据我了解，您想在组件进入视图时获取数据，对吗？

这是我的解决方案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>
  );
}

此外，这只会获取一次数据。

于 2020-08-20T19:45:34.347 回答