我有一個代表食譜的物件，每當我單擊“添加”按鈕時，我的函式都應該將該相應的食譜添加到空物件陣列中，但奇怪的是只有在食譜物件被添加到空陣列時，當我嘗試添加時不止一個然后它向我拋出這個：favList.push 不是一個函式。
我的 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
我的 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;
***
uj5u.com熱心網友回復：
首先，push將改變現有陣列。
然后將回傳值傳遞給setFavList （這是一個表示陣列長度的數字）。
您需要將一個新陣列傳遞給setFavList. 您不能（有用地）傳遞該數字或原始（但發生變異的）陣列（因為它會檢測到它是同一個陣列并且什么都不做）。
例如：
const addToFav = (itemToBeAdded) => {
const replacementList = [...favList, itemToBeAdded];
setFavList(replacementList);
}
（另請注意，itemToBeAdded可能不應該包含在額外的陣列中。）
然后您需要移動記錄新值的嘗試，因為addToFav將關閉原始值。這個問題的答案解釋了這一點
uj5u.com熱心網友回復：
Array.push 在您的情況下期望物件，但是您使用 item 推送陣列
這是需要改變的
const addToFav = (itemToBeAdded) => { setFavList(favList.push(itemToBeAdded)); console.log(favList); }
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/383619.html
標籤：javascript 数组 反应 反应钩子