reactjs - 无法有条件地更新 `setState`里面的 `useEffect`

Question

用于创建或编辑用户的组件

下面的部分代码，我在 useEffect 中有条件地设置了 isActive 状态

我正在获取 user_data 的其他字段并成功更新 state但只有 setIsActive 没有更新 state

function CreateUser() {

    const [isActive, setIsActive] = useState<boolean | undefined>();
    
    useEffect(() => {
        if (params_user_id?.id != null) {
            const SINGLE_USER_URL = `users/${params_user_id.id}/edit`;
            const getSingleUser = async () => {
                const {data} = await axios.get(SINGLE_USER_URL)
                console.log(data)
                setIsActive(data.isactive)
                console.log('isactive', isActive)
            }
            getSingleUser();
        }
    }, [params_user_id])

    return (
        <>
     <Form.Check
          defaultChecked={isActive}
          className='mb-3'
          type='checkbox'
          id='active'
          onChange={e => setIsActive(!(isActive))}
          label='Active: Unselect for deleting accounts.'/> 
        </>
    )

}

Form.Check 来自 Bootstrap-React

当我点击编辑页面时

我确实尝试了很多东西，比如三元运算符等checkBox 未被选中 因为它是未定义

Answer 1

在 React 中设置状态就像一个异步函数。
这意味着当您设置状态并在其后放置 console.log 时，它可能会在状态实际完成更新之前运行。

这就是我们拥有 useEffect 的原因，这是一个内置的 React 钩子(Hook)，当其中一个依赖项发生变化时会激活回调。

在您的情况下，您已经在使用 useEffect 来更新状态，但是如果您想对状态更改采取行动，或者只是记录它的值，那么您可以使用另一个单独的 useEffect 就是为了这个目的。

示例:

useEffect(() => {
   console.log(isActive)
   // Whatever else we want to do after the state has been updated.
}, [isActive])

此 console.log 仅在状态完成更改并发生渲染后运行。

• 注意:示例中的“isActive”可与您正在处理的任何其他状态 block 互换。

检查 documentation有关这方面的更多信息。

---

补充说明:

• 最好避免使用松散的 != 来检查相等性/不等性，而是选择严格的不等性检查，即 - !==
  松散的不等式很少使用(如果有的话)，并且可能成为潜在错误的来源。

• 也许最好避免将其输入为 boolean |未定义。
  除非有正当理由，否则这听起来像是另一个潜在的错误来源。
  我建议只依赖 boolean。