在子组件中使用异步请求更新父组件状态。

Question

我正在使用React钩子+ 阿波罗钩子 来偷懒加载一系列组件。这些组件每次被挂载时都会进行查询。我希望这些组件的父组件能够跟踪每个异步调用何时用数据解析。

我有一个工作示例，它将父状态传递给它的子状态，并在回调中得到更新。然而，我已经看到了这样的情况：子代在父代有时间更新之前就试图更新父代的状态。这就导致了状态的更新要么比它应该更新的多，要么不够。

下面是我目前正在做的一个例子。

const Parent = () => {
  const [state, setState] = useState();

  const handleChange = () => {
    setState(state + 1); 
  }

  if (state < 10) {
    return <div>no more results</div>;
  }

  // it's possilbe that 5-6 mount at once and fire off queries
  return (
    <>
      {arr.map(c => <Child handleChange={handleChange} />)}
    </>
  )
}

const Child = ({ handleChange }) => {
  const [ loadMore, { called, loading, data }] = useLazyQuery(QUERY, {
    onCompleted: (data) => {
      if (data.length > 0) {
        handleChange() 
      }
    }
  });

  // When a user scrolls into view, make request
  return (
    <Waypoint onEnter={loadMore}>
      {do something with data}
    </Waypoint>
  )
};

有没有更好的方法来管理父级状态 当它的子代在进行异步调用时？而不引入Redux？

Answer 1

这可能是一个解决方案。

const Parent = () => {
  const [state, setState] = useState(0);

  const handleChange = (idx) => {
    setState(idx); 
  }

  if (state < arr.length) {
    return <div>no more results</div>;
  }

  return (
    <>
      {arr.map((c, idx) => <Child handleChange={handleChange} key={idx} id={idx}/>)}
    </>
  )
}

const Child = ({ handleChange, id }) => {
  const [ loadMore, { called, loading, data }] = useLazyQuery(QUERY, {
    onCompleted: (data) => {
      if (data.length > 0) {
        handleChange(id) 
      }
    }
  });

  // When a user scrolls into view, make request
  return (
    <Waypoint onEnter={loadMore}>
      {do something with data}
    </Waypoint>
  )
};