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函数返回承诺。如果将async函数用作事件处理程序，则不会使用它返回的诺言。这意味着您需要通过将{strong>全部的承诺包装在async / try中，而不仅仅是其中的一部分，来确保catch函数永远不会拒绝该承诺。它。（或者不要在收到返回值的东西无法理解和处理承诺的情况下使用async函数。）

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

1 个答案: