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}。

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

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

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

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

Answer 2

可能您需要的是：

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

setManager(prevState => ({
  data: prevState.data.map((item, index) => ({ ...item, ...res.data[index] }))
}));

但是，如果您只是存储“项目”数组，那么您的状态应该更像：

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

setManager(prevState =>
  prevState.data.map((item, index) => ({ ...item, ...res.data[index] }))
);

此外，您如何合并上一个和传入的数据取决于很多事情，也许您需要一些更复杂的状态存储方式。

Answer 3

您使用数组（而不是对象）来初始化状态，这就是行为的原因。

更改为

useState({data : [{name : undefined , project : []}] });

到

useState({data : {name : undefined , project : []} });

更改状态而不覆盖其他值

3 个答案: