Quiero cambiar el estado de una matriz que tendrá valores derivados del archivo data.js como punto de partida. Cambiar un estado significa ejecutar la función setAllThingsArray y agregar un nuevo elemento que se establecerá mediante una función setThingsArray basada en el estado anterior (thingsArray). ¿Necesito mapear allThingsArray para obtener una matriz actualizada con elementos agregados y enumerarlos?
import React from "react"; import data from "../data"; import Stamp from "../components/Stamp"; export default function AddItem(props) { const [thingsArray, setThingsArray] = React.useState({ key: 9, img: "../images/stamp1.jpg", name: "Stamp 5", description: "AAAA", rating: 78.0, }); function addItem() { setAllThingsArray((prevAllThingsArray) => ({ arr: [ ...prevAllThingsArray.arr, setThingsArray((prevThingsArray) => ({ ...prevThingsArray, key: prevThingsArray.key + 1, img: "../images/stamp1.jpg", name: "Stamp 5", description: "AAAA", rating: 78.0, })), ], })); } const [allThingsArray, setAllThingsArray] = React.useState(data); const allThingsElements = allThingsArray.map((st) => { return <Stamp key={st.key} st={st} />; }); return ( <> <div className="form"> <input type="text" placeholder="Image" className="form--input" /> <input type="text" placeholder="Stamp title" className="form--input" /> <input type="text" placeholder="Description" className="form--input" /> <input type="text" placeholder="Rating" className="form--input" /> {/* <button className="form--button" onClick={addStampToJson(json_stamp)}> Add Stamp </button> */} <button className="form--button" onClick={addItem}> Add Stamp </button> </div> <section className="stamps-list">{allThingsElements}</section> </> ); }¿Es correcto colocar la función setThingsArray dentro de la función setAllThingsArray?
los establecedores de estado ( setAllThingsArray y setThingsArray ) son asincrónicos, por lo que no puede usar una actualización de estado dentro de otra actualización de estado. setThingsArray en sí también es una función (no un valor de estado), por lo que tampoco puede configurarlo directamente en setAllThingsArray .
Le propondría que agregue otra variable para mantener un objeto actualizado (no un estado actualizado) y luego actualice los estados por separado con el objeto actualizado.
function addItem() { //add an updated object const updatedThingsArray = { ...thingsArray, //this is an actual previous state key: prevThingsArray.key + 1, img: "../images/stamp1.jpg", name: "Stamp 5", description: "AAAA", rating: 78.0, } setAllThingsArray((prevAllThingsArray) => ([ ...prevAllThingsArray, updatedThingsArray, //it's become a new object with your updated data ])); setThingsArray(updatedThingsArray) //update it back to the `thingsArray` as the new state }