时间戳

首页 > 解决方案 > 反应功能组件中的 setState 没有被分配具有分配对象的属性

javascript - 反应功能组件中的 setState 没有被分配具有分配对象的属性

问题描述

我有一个反应功能组件。我有一个称为当前财产的状态。

const [currentProperty, setCurrentProperty] = useState({})

我正在尝试使用 setCurrentProperty 分配一个对象，但它不起作用，统计数据保持为黑色对象。这是当前代码：

  function handleEditingMortagePaymentOpen(id){
    setCurrentlyEditingMortgagePayments(true)
    setSelectedPropertyById(id)
    for(let i = 0; i < properties.length; i++){
      if(properties[i]['id'] == id){
        console.log(properties[i])
        setCurrentProperty(properties[i])
        console.log(currentProperty)
      }
    }
  }

这就是 console.log 显示的内容

{id: 3, picture: '../images/unnamed.jpeg', price: 464000, status: 'Active', beds: 3, …}
address: "Plan 2 Plan, Neo at Mission Foothils"
agent: "John Doe"
baths: 3
beds: 3
broker: "JD Realty"
days_listed: 29
hoa: 12
home_insurance: 239
id: 3
living_space: 3964
mls: "OC3628342"
picture: "../images/unnamed.jpeg"
price: 464000
property_tax: 68
rent: 2200
sqft: 1939
status: "Active"
[[Prototype]]: Object
{}

标签： javascriptreactjs

解决方案

这与 useState set 方法中提到的相同问题没有立即反映更改

React setState 或 useState 函数不会立即更改您的变量，它是一个异步过程，只会在下一次渲染时设置您的值，

    console.log(properties[i])
    setCurrentProperty(properties[i])
    console.log(currentProperty)

此代码显示不同的日志，因为当前属性尚未使用新属性进行更新，要检查状态变量的更改，您可以在函数之外（在组件返回之前）或在useEffect

 useEffect(()=> {
    conole.log(currentProperty) // this will console latest value on your every `currentProperty` update
 },[currentProperty])

或者您可以在返回 HTML 之前简单地对其进行控制台，或者在 HTML 中，值将在下一次渲染时自动更新

推荐阅读