javascript - 更改状态而不覆盖 react 中的其他值

Question

我正在尝试更改应用程序的状态，而不覆盖未更改的值。我正在使用扩展运算符来执行此操作，但出现了问题。

这是我的基本状态: useState({data : [{name : undefined , project : []}] });

使用setState，我只想添加名称，但将项目数组保留为空，因为它没有更改。

setManager(prevState => ({...prevState , data : res.data}))

执行 setState 后，新状态如下所示:

[
    {name: "John doe"},
    {name: "Jane Doe"}
]

如您所见，默认状态已被完全覆盖。

顺便说一句，res.data 看起来像这样:

[
  {name: "john doe"},
  {name: "jane doe"}
] 

Answer 1

通过 setManager(prevState => ({...prevState , data : res.data})) 您只需覆盖早期的“main”data 属性.

data 是一个数组，新值在数组中...只需 concat 它们

setManager(prevState => ({...prevState , 
  data : prevState.data.concat( res.data )
}))

之后你应该有

[  
  {name: undefined , project : []},  
  {name: "john doe"},
  {name: "jane doe"}
] 

...但您可能想单独管理名称和项目:

const [manager, setManager] = useState({
  data: { 
    name: undefined, 
    project: []
  }
});

...甚至

const [manager, setManager] = useState({
  name: undefined, 
  project: []
});

这样您就不需要使用“中介”.data来“处理”此数据

<Component names={manager.name} />

...不是{manager.data.name}。

当然，仅更新名称需要不同的代码

setManager(prevState => ({
  ...prevState, 
  name : prevState.name.concat( res.data )
}))

• ...prevState 防止删除 project 属性
• name 应使用 [] 初始化，而不是 undefined
• 条件渲染可以通过 `{!manager.name.lenght && ... }

如果您有单独的状态“切片”，则无需使用一个公共(public)状态，请使用多个 useState 声明。