来自回调的状态更新

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_ 添加到依赖数组意味着useEffect 将在每次progress_ 更改时被调用。如果将其保留为空的依赖数组，那么 useEffect 只会在代码挂载到 DOM 的最开始时被调用。

这里有一个关于依赖数组的很好的解释：https://devtrium.com/posts/dependency-arrays

Answer 2

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

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