Tengo un objeto que representa una receta, cada vez que hago clic en el botón "Agregar", se supone que mi función debe agregar la receta correspondiente a una matriz de objetos vacía, pero curiosamente solo se agrega un objeto de receta a la matriz vacía y cuando intento agregar más de uno me lanza esto: favList.push no es una función.
Mi código HTML:
import React from 'react' import './home.css' const Home = (props) => { return <div className="home"> <div className="wrapper"> {props.items.map((item) => { return <div className="flexIt"> {item.ingredients.map((ingredient) => <ol> <li>{ingredient}</li> </ol> )} </div> </div> <div className="closeBtn"> <button onClick = {() => {props.onRemove(item)}} >X</button> <button onClick = {() => {props.addItemToFav(item)}} >Add</button> </div> </div>})} </div> </div> </div> </div> } export default Home
Mi código JavaScript:
import './App.css'; import Home from './components/Home'; import AddRecipe from './components/AddRecipe'; import { useNavigate } from 'react-router' import items from './data'; import React, { useState } from 'react'; import {Routes, Route} from 'react-router-dom'; const App = () => { const navigate = useNavigate(); const [favList, setFavList] = useState([]); const addToFav = (itemToBeAdded) => { setFavList(favList.push([itemToBeAdded])); console.log(favList); } return ( <Routes> <Route exact path="/" element={<Home onRemove={removeItem} addItemToFav={addToFav} items={itemsList}/>} /> <Route path="/addRecipe" element={<AddRecipe onAddRecipe={(newRecipe) => { addRecipe(newRecipe); navigate('/'); }} />} /> </Routes> ); } export default App; ***
Primero, push
mutará la matriz existente.
Luego pasa el valor de retorno a setFavList
(que es un número que representa la longitud de la matriz).
Debe pasar una nueva matriz a setFavList
. No puede (útilmente) pasar ese número o la matriz original (pero mutada) (ya que detectaría que es la misma matriz y no haría nada).
Por ejemplo:
const addToFav = (itemToBeAdded) => { const replacementList = [...favList, itemToBeAdded]; setFavList(replacementList); }
(Tenga en cuenta también que itemToBeAdded
probablemente no debería incluirse en una matriz adicional).
Luego, su intento de registrar el nuevo valor debe moverse porque addToFav
se habrá cerrado sobre el valor original. Esto se explica por las respuestas a esta pregunta.