Tengo el siguiente estado de reacción, quiero actualizar el segundo valor, no el objeto completo y tampoco quiero usar un objeto como valor, por ahora solo puedo cambiar el objeto completo pero no el valor deseado específico cómo target y actualice el índice deseado.
// State const [state, setState] = useState({ element: [false, 'starter text'] }); // Update State logic setState({ ...state, element: [(element[1] = 'updated text')] });Al actualizar el estado en React, copia superficialmente el estado y el estado anidado que está actualizando. Para matrices, esto significa que copia superficialmente la matriz.
// 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) }));Si la matriz era una matriz de objetos, también debe copiarlos superficialmente y luego actualizar la propiedad anidada.
Ejemplo:
element: state.element.map( (el, i) => i === 1 ? { ...el, nestedProperty: 'updated text' } : el )Sé que este documento de patrones de actualización inmutable es de Redux, pero resuelve muchos problemas comunes de actualización de estado de React.
Puede crear un nuevo estado de estado como codeSandbox
setState(oldState => { const newState = { ...oldState, element: [ ...oldState.element ]}; newState.element[1] = "updated text"; return newState; })Puedes usar Object.assign . Dado que una matriz es un Objeto con índices como sus propiedades, puede hacer esto:
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);