React 錯誤 - 'deleteNinja' 未定義 no-undef

Question

我想通過 Id 刪除 state 數據我將 function 作為道具傳遞。 但我在 Ninja.js 文件中遇到錯誤說-

編譯失敗

src\Ninjas.js 第 11:41 行：'deleteNinja' 未定義 no-undef

我不明白為什么我會出錯。

App.js 文件-

 import Ninjas from './Ninjas'; import React, { useState } from "react"; import AddNinja from './AddNinja'; function App() { const [ ninjas, setNinja ] = useState([ { name: 'Pratik', age: 23, belt:'Black', id: 1 }, { name: 'Yash', age: 20, belt:'Green', id: 2 }, { name: 'Smit', age: 20, belt:'Pink', id: 3 } ]); const addNinja = (ninja) => { ninja.id = Math.random(); setNinja([...ninjas, ninja]); }; const deleteNinja = (id) => { setNinja(ninjas.filter(ninja => { return ninja.id;== id })); }; return ( <div className="App"> <header className="App-header"> <h1>My First react App</h1> <Ninjas ninjas = { ninjas } deleteNinja = { deleteNinja } /> <AddNinja addNinja = { addNinja } /> </header> </div> ); } export default App;

Ninja.js 文件：-

 import React from 'react'; const Ninjas = ({ ninjas }) => { const ninjaList = ninjas.map(ninja => { return ninja.age > 19? ( <div className="ninja" key = { ninja.id }> <div>Name: { ninja.name }</div> <div>Age: { ninja.age }</div> <div>Belt: { ninja.belt }</div> <button onClick={() => {deleteNinja(ninja.id) }}>Delete Ninja</button> </div> ): null; }) return( <div className='ninja-list'> { ninjaList } </div> ) } export default Ninjas;

Answer 1

Ninjas組件中沒有deleteNinja 。

更改代碼如下：

...
const Ninjas = ({ ninjas, deleteNinja }) => {
...