reactjs - 使用子组件中的异步请求更新父组件状态
问题描述
我正在使用 React hooks + Apollo hooks来延迟加载一系列组件。这些组件在每次挂载时都会进行查询。我希望这些组件的父组件跟踪每个异步调用何时用数据解析。
我有一个工作示例,它将父状态传递给它的子状态,并在回调中更新。但是,我已经看到了孩子在父母有时间更新之前尝试更新父母状态的情况。这会导致状态要么更新得比它应该更新的多,要么不够。
这是我目前正在做的一个例子:
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?
解决方案
这可能是一个解决方案。
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>
)
};
推荐阅读
- python - Django - 添加新记录时使用 get_readonly_fields 但获取“NoneType”对象不可迭代
- amazon-web-services - 如何通过 url 调用 AWS API 将 PutItem 放入 DynamoDB 表中?
- python - 试图找出我的代码是如何出错的
- python-3.x - Tensorflow 2.2 [预测必须 >= 0] [条件 x >= y 不符合元素:] [x (dense_1/Sigmoid:0) = ]
- javascript - 绘图画布不能在移动设备上工作,在桌面上工作正常
- sql - 在雪花视图中将日期范围拆分为新记录
- javascript - 需要帮助将 JavaScript 变量设置为 WordPress 自定义字段的值
- python - HWID 绑定白名单系统 | Python
- r - 从 r 中的图中删除 NA 变量
- python - 输入的数据成为 for 循环中的新数据