Tengo un enlace jsfiddle https://jsfiddle.net/ilikeflex/r2uws1ez/30/
Estoy tratando de establecer un nuevo estado accediendo al estado anterior. Tengo tres casos diferentes en los que intento actualizar el estado, pero no estoy seguro de por qué el Caso 2 y el Caso 3 no funcionan. Podrías ayudarme ??
const useState = React.useState; function Example() { const [todos, setTodos] = useState([ {id:1,text:'Learn React'}, {id:2,text:'Learn TypeScript'}, {id:3,text:'Learn Java'} ]); const case1 = () => { const newItem = {id:3,text:'Learn C++'}; setTodos((prevState) => { return prevState.concat(newItem); }); } const case2 = () => { const newItem = {id:3,text:'Learn .Net'}; setTodos((prevState) => { prevState.push(newItem); // I am adding to previous state and returning it return prevState; }); } const case3 = () => { const newItem = {id:3,text:'Learn C#'}; setTodos((prevState) => { let result = { ...prevState, newItem }; // using spread operator return result; }); } return ( <div> <button onClick={case1}>Case 1</button> <button onClick={case2}>Case 2</button> <button onClick={case3}>Case 3</button> <ul> {todos.map((item) => ( <li key={item.id}>{item.text}</li> ))} </ul> </div> ); } ReactDOM.render(<Example />, document.getElementById('root'))Para que el caso 2 funcione, primero debe crear una variable a partir de prevState. Luego puede presionarlo y devolver esa nueva variable.
const case2 = () => { const newItem = {id:3,text:'Learn .Net'}; setTodos((prevState) => { const newState = [...prevState] newState.push(newItem); return newState; }); } Para el caso 3, cometió un pequeño error al convertir el resultado en un objeto en lugar de una matriz. Cambie el {} a [] y debería funcionar bien, así.
const case3 = () => { const newItem = {id:3,text:'Learn C#'}; setTodos((prevState) => { let result = [...prevState, newItem ] ; return result; }); }En todos los casos, se debe crear y devolver una nueva matriz.
Caso 1.
return prevState.concat(newItem); [ concat create a new array ]Caso 2
const newState = [...prevState]; [ Spread Operator creates a new array ] newState.push(newItem); return newState;Caso 3
let result = [...prevState, newItem ] ; [ Spread Operator creates a new array and newItem is added simultaneously ] return result;