React.js useState Hook 需要一段时间才能更新 state

Question

当我从 API 加载异步数据并将数据设置为 state 时，需要花费少量时间，而 state 可以访问此数据并且我的代码中断。

等待数据加载、进行检查然后决定更新或跳过更新的方法是什么？ 我写了一个示例代码来说明这种情况。

import React, { useState, useEffect } from 'react'
import { useHistory, useParams } from "react-router-dom";

export default function Demo() {
    const { id } = useParams();
    const [userData, setUserData] = useState([])
    const [existing, setExisting] = useState(false)

    function loadData() {
        return API.get("sdd", "/sdd")
      }

    async function handleSubmit(event) {
        event.preventDefault()


        try {
            const data = await loadData();
            setUserData(data);
           
          } catch (e) {
            onError(e);
          }
          
      
          console.log(`userData`, userData)
          for (let i = 0; i < userData.length; i++) {
            if (Object.values(userData[i])[3] === id) {
              setExisting(true)
            } 
          }
      
          ///check if existing is false and add the data else alert and skip
    }


    return (
        <form className="form1" onSubmit={handleSubmit}>

            <button type="submit"> Submit</button>
            <button > Cancel</button>
        </form>
    )
}

Answer 1

如果你的意思是你正在检查existing ，你有评论“检查现有的是否为假并添加数据，否则警告并跳过”那么，是的，它将具有旧值。 State 更新是异步的。 在您的组件 function 再次被调用之前， existing不会有新的价值。

如果您需要知道该评论的价值是多少，请执行以下操作：

let existing = false;
console.log(`userData`, userData)
for (let i = 0; !existing && i < userData.length; i++) {
    if (Object.values(userData[i])[3] === id) {
        existing = true;
    } 
}
setExisting(existing);
// ...use `existing` (which is the local, not the state variable) here...

---

旁注： async函数返回承诺。 如果您使用async function 作为事件处理程序，则不会使用它返回的 promise。 这意味着您需要确保async function 永远不会拒绝 promise，方法是将其全部包装在try / catch中，而不仅仅是其中的一部分。 （或者不要在接收返回值的事物不理解和处理承诺的情况下使用async函数。）