Невозможно обновить компонент изнутри тела функции другого предупреждения компонента

Question

Я написал компонент под названием component1, как показано ниже, и он находится внутри родительского компонента. Компонент 1 находится внизу страницы, и я не хочу отображать его, пока пользователь не прокрутит вниз до этой области. Таким образом, я использую 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>
  );
}

также это выборка данных только один раз.