如何在反应状态对象(功能组件)中添加键/值

Question

我有一个状态

const [options, setOptions] = useState({});

我想添加一个键/值到对象，同时也保留我在之前推送的键/值

这行不通:

array.map((value, index) => {  // consider array has some data
setOptions({...options, [index]: value})
});

举个例子我输入了{0:"Zero"}下次我push {1: "One"}时，它应该保留{0:"Zero"}

Answer 1

要执行此操作，您需要首先获取旧数据并将其存储在变量中，然后进行更新，然后再次设置选项:

例如:

let tempOptions = options;
array.map((value, index) => {  // consider array has some data
tempOptions[index] = value;
});
setOptions(tempOptions);

你可以这样做:

setOptions(prev => {...prev, newValue});

永远记住你是在处理状态，你不能直接更新状态，要小心很多状态更新…

Answer 2

尝试在新对象中添加新值，然后设置一次setopoptions。不要尝试在数组映射中设置选项

var newOptions = {}
array.map((value, index) => {  // consider array has some data
newOptions[index] =  value
});
setOptions({...options, ...newOptions})