Reactjs useState对象未正确更新

当我们试图同时更新useState对象属性时。它没有更新

const [stateData, setStatedata] = useState({
id: 0,
name: '',
address: '',
street: '',
city: '',
country: '',
property1: '',
property2: ''
etc...
});

当我尝试更新文本更改事件的属性1时

const test = () => {
if(case == 1){
setStatedata({
 ...stateData,
 property1: '123'
});
}
else{
// Do something
}
setStatedata({
 ...stateData,
 property2: '654'
});
}

在这种情况下，property1值将不会设置为123

但它并不等待property1值被更新。以前更新的值并不总是存在

如果我需要20个或更多的状态属性，哪一个是更好的解决方案

反对

每个属性的单个状态

---

我尝试此代码对我有效您可以尝试此代码：

const[stateData，setStatedata]=useState({
id:0，
名称：“”，
地址：''，
街道：''，
城市：''，
国家：“，
属性1:“”，
属性2:“”
});
常数测试=（）=>{
设置状态数据({
…国家数据，
物业1:‘123’
});
}
常量test2=（）=>{
设置状态数据({
…国家数据，
物业2:'65554'
});
}
console.log（stateData）
返回(
test（）}>单击此处

test2（）}>单击此处2
);

您应该通过两个参数文本更改事件单击

要在状态对象中更改的对象属性名称。例：不动产1

要为该对象属性设置的值。例如：-任何值（文本事件值）

你的测试功能是这样的

const test = (key,value) => {
    setStatedata({...stateData,[key]:value})
}

---

现在，您不需要创建多个函数来更改对象值。

您应该按照以下方式更新状态值：

setStatedata(state=> ({
   ...state,
   property2: '65554'
}));

此外，您可以使用my lib中的自定义钩子来实现深度状态管理器（）：

从“React”导入React；
从“use-async-effect2”导入{useAsyncDeepState}；
功能测试组件（props）{
const[state，setState]=使用异步状态({
x:123，
y:456
});
常量incX=（）=>{
setState（（{x}）=>（{x:x+1}））；
};
常数增量=（）=>{
setState（（{y}）=>（{y:y+1}））；
};
返回(
UseSyncDeepState演示
state.x:{state.x}
state.y:{state.y}
incX（）}>incX
incY（）}>incY
);
}

如果在异步代码的上下文中使用，则需要等待更新

import React，{useCallback，useffect}来自“React”；
从“use-async-effect2”导入{useAsyncDeepState}；
常量延迟=（毫秒）=>新承诺（（解析）=>设置超时（解析，毫秒））；
功能测试组件（props）{
const[state，setState]=使用异步状态({
柜台:0,，
计算计数器：0
});
useffect（（）=>{
setState（（{counter}）=>({
计算计数器：计数器*2
}));
}，[state.counter]）；
const inc=useCallback（（）=>{
（异步（）=>{
等待延迟（1000）；
等待设置状态（（{counter}）=>（{counter:counter+1}））；
console.log（“computedCounter=”，state.computedCounter）；
})();
});
返回（公司）；
}

您可以添加更多的代码片段吗？如何更新property1和property2？您正在调用哪个函数来更新这两个属性？您正在更新同一个函数中的两个属性吗？在某些情况下，我需要使用if-else条件``const test=（）=>{if（case==1）{setStatedata（{…stateData，property1:'123}）；}else{//Something}setStatedata（{…stateData，property2:'65554}）；}；`如果case==1，则两个更新都将工作。因此，属性1的第一个更新值将不存在

setStatedata(state=> ({
   ...state,
   property2: '65554'
}));

import React from "react";
import { useAsyncDeepState } from "use-async-effect2";

function TestComponent(props) {
  const [state, setState] = useAsyncDeepState({
    x: 123,
    y: 456
  });

  const incX = () => {
    setState(({ x }) => ({ x: x + 1 }));
  };

  const incY = () => {
    setState(({ y }) => ({ y: y + 1 }));
  };

  return (
    <div className="component">
      <div className="caption">useAsyncDeepState demo</div>
      <div>state.x : {state.x}</div>
      <div>state.y : {state.y}</div>
      <button onClick={() => incX()}>Inc X</button>
      <button onClick={() => incY()}>Inc Y</button>
    </div>
  );
}

import React, { useCallback, useEffect } from "react";
import { useAsyncDeepState } from "use-async-effect2";

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function TestComponent(props) {
  const [state, setState] = useAsyncDeepState({
    counter: 0,
    computedCounter: 0
  });

  useEffect(() => {
    setState(({ counter }) => ({
      computedCounter: counter * 2
    }));
  }, [state.counter]);

  const inc = useCallback(() => {
    (async () => {
      await delay(1000);
      await setState(({ counter }) => ({ counter: counter + 1 }));
      console.log("computedCounter=", state.computedCounter);
    })();
  });

  return (<button onClick={inc}>Inc</button>);
}