如何更新和目标正确的索引在一个数组嵌套在一个对象?

Question

我有以下反应状态，我想更新第二个值，而不是整个对象，我也不想使用对象作为值，现在我只能改变整个对象，而不是特定的想要的值如何目标和更新想要的索引。

// State 
const [state, setState] = useState({
element: [false, 'starter text']
});

// Update State logic
setState({ ...state, element: [(element[1] = 'updated text')] });

Answer 1

在React中更新状态时，你会复制你正在更新的状态和嵌套状态。对于数组，这意味着您将浅层复制数组。

// State 
const [state, setState] = useState({
element: [false, 'starter text']
});

// Update State logic
setState(state => ({
// shallow copy any previous root-level state
...state,
// shallow copy the previous state's element array
// when the mapped index matches the index you want to update
// return the updated value, otherwise return existing value
element: state.element.map((el, i) => i === 1 ? 'updated text' : el)
}));

如果数组是一个对象数组，那么你也需要浅层复制它们，然后更新嵌套属性。

的例子:

element: state.element.map(
(el, i) => i === 1
? {
...el,
nestedProperty: 'updated text'
}
: el
)

我知道这个不可变更新模式文档来自Redux，但它解决了许多常见的React状态更新问题。

Answer 2

你可以创建一个新的状态为codeSandbox

setState(oldState => {
const newState = { ...oldState, element: [ ...oldState.element ]};
newState.element[1] = "updated text";
return newState;
})

Answer 3

您可以使用Object.assign。由于数组是一个以索引作为其属性的对象，您可以这样做:

const arr = [1, 2, 3, 4, 5];
const updatedArr = Object.assign([], arr, { 1: 10 }); // Update value at index 1.
console.log(arr);
console.log(updatedArr);