Question

我想通过 Id 删除状态数据我将函数作为道具传递。但我在 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

deleteNinja 组件中没有 Ninjas 属性。

更改代码如下：

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

反应错误 - 'deleteNinja' 未定义 no-undef

1 个答案: