React.js useState Hook 需要一段时间来更新状态

Question

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

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

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 你有评论的地方 "检查现有的是否为假并添加数据，否则警告并跳过" 那么，是的，那将具有旧值。状态更新是异步的。 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 实现 return 承诺。如果您使用 async 函数作为事件处理程序，则不会使用它 return 的承诺。这意味着您需要确保 async 函数永远不会拒绝该承诺，方法是将其 all 包装在 try/catch 中，而不是只是其中的一部分。（或者不要使用 async 接收 return 值的东西不理解和处理承诺的函数。）

React.js useState Hook 需要一段时间来更新状态

React.js useState Hook takes a while to update the state

javascript

callback

reactjs

react-hooks

use-effect