通过回调进行状态更新

Question

以下成员函数用假数据异步填充folder_structure对象：

fake(folders_: number, progress_callback_: (progress_: number) => void = (progress_: number) => null): Promise<boolean>
{
return new Promise((resolve, reject) => {
for (let i_ = 0; i_ < folders_; i_++) {
progress_callback_(i_ / folders_ * 100.);
this.add(this.id(), faker.address.city() + i_, random_choice(this.folder_structure_id()));
}
progress_callback_(folders_ / folders_ * 100.);
resolve(true);
})
}

它使用回调来更新for循环中的进度，然后使用该循环来更新具有空依赖数组的useEffect()函数中的状态(进度条(。

let [progress_state_, set_progress_state_] = useState<number>(0);
let [fake_done_, set_fake_done_] = useState<boolean>(false);
useEffect(() =>
{
if (fake_)
folder_structure_.fake(fake_, (progress_) => {
set_progress_state_(progress_)
}).then(value => set_fake_done_(value));
}, [])
if (!fake_ || fake_done_) etc etc

但是，状态没有更新(在控制台中记录进度似乎很好(。关于是否可以从useEffect中更新状态，有什么想法吗？

Answer 1

useEffect钩子不工作的原因是在progress_state_状态更改时没有调用它。

代替

useEffect(() =>
{
...
}, [])

试试这个

useEffect(() =>
{
...
}, [progress_])

将progress_添加到依赖数组意味着每次progress_更改时都将调用useEffect。如果将其保留为一个空的依赖数组，那么useEffect只会在代码装载到DOM的一开始被调用。

以下是对依赖数组的一个很好的解释：https://devtrium.com/posts/dependency-arrays

Answer 2

解决您的最后一个问题：是的，可以从useEffect中更新状态。

为了了解您主要问题的根源，我很想看看您是如何进行日志记录的。您是从fake()还是从render()功能进行登录？