tengo un problema con la matriz de objetos que está dentro del estado. Mi pregunta es cómo cambiar el valor de un objeto como en el código de ejemplo a continuación
const [theArrayOfObjects, setTheArrayOfObjects] = useState([ { color: "blue", shape: "square" }, { color: "red", shape: "circle" } ]);lo que quiero es
[ { color: "blue", shape: "square" }, { color: "red", shape: "rectangle" } ]en resumen, solo quiero actualizar la matriz de objetos cambiando solo este valor específico
setTheArrayOfObjects([ { color: "blue", shape: "square" }, { color: "red", shape: "rectangle" } ] )Si bien esto puede no ser exactamente lo que pediste, se ajusta a tus necesidades y es simple. Otras complicaciones, como iterar a través de cada elemento y encontrar un patrón para llegar a un elemento específico, pueden generar resultados inesperados.
Si no le gusta esto, entonces puede encontrar una estructura de estado diferente (un objeto en lugar de una matriz).
Use una actualización de estado funcional para actualizar correctamente desde cualquier valor de estado anterior. Copie superficialmente cualquier parte del estado que esté actualizando. Recuerde que la función de actualización de estado useState no fusiona superficialmente sus actualizaciones, está devolviendo un valor de estado completamente nuevo.
Dado:
const [theArrayOfObjects, setTheArrayOfObjects] = useState([ { color: "blue", shape: "square" }, { color: "red", shape: "circle" } ]);Actualizar de la siguiente manera:
Ejemplo:
const updateShape = (shape, index) => { setTheArrayOfObjects(state => state.map((el, i) => i === index ? { ...el, shape } : el, )); };...
updateShape("rectangle", 1);Aunque es de Redux, la documentación de Patrones de actualización inmutables es increíblemente útil para explicar con más detalle lo que describí anteriormente y aún se aplica a las actualizaciones de estado estándar de React. Por favor, haz una lectura sin embargo.