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 HomeMi 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.