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 }) => {
...