主页 / 问题 / 1227756
Accepted
Dan
Asked:2022-01-06 13:35:49 +0000 UTC2022-01-06 13:35:49 +0000 UTC

如何让console.log只有在数据写入后才执行？

  • 772
const [data, setData] = useState({
    email: "",
    password: "",
    passwordCheck: "",
    phone: "",
    username: "",
    address: ""
  })

const onChangeHandler = (event) => {
    setData({...data, [event.target.name]: event.target.value})
    console.log(data)
  }

<label>E-mail*</label>
            <input type="email" onChange={onChangeHandler} defaultValue={data.email} name="email"/>
            <div className="form-error"></div>

当您输入输入时，数据将存储在 state 中。但是 console.log(data) 在一个动作中显示有延迟（尽管它位于 setData 之后），例如，如果我在输入Test中写入，那么 console.log 将显示只有Tes处于状态 以及为什么会出现这样的错误或在哪里您只能在更新状态后使用 console.log。对验证很重要

reactjs

1 个回答

  1. Best Answer

    setDate异步执行，因此显示不相关的结果。

    您可以编写useEffect, 以获得实际结果。

    useEffect(() => {
   console.log(data)
}, [data]);

    但是将整个对象塞进一个依赖数组也不是一个好主意。最好使用该对象的某些字段。

    useEffect(() => {
   console.log(data.email)
}, [data.email]);
    • 1

相关问题