我在使用 React 制作的项目中遇到未定义的错误

Question

我正在发送一组对象作为道具。 当我console.log(this.props)我得到了对象数组，但是当我尝试将它分配给一个变量时，它给了我

类型错误：忍者未定义

这就是我发送道具的方式

import React from 'react';
import Ninjas from './Ninjas';

class App extends React.Component {
  state = {
    ninjas:[
      {name:"Ryu",age:"20",belt:"black",key:"1"},
      {name:"Yoshi",age:"22",belt:"yellow",key:"2"},
      {name:"Mario",age:"25",belt:"white",key:"1"}
    ]
  }
  render(){
  return (
    <div>
      <h1>My first React App</h1>
      <Ninjas list={ this.state.ninjas }/>
    </div>
  )
  }
}

export default App;

这就是我的食谱

import React from 'react';

class Ninjas extends React.Component {
    render(){
        const { ninjas } = this.props;
        const ninjasList = ninjas.map(ninja => {
            return(
                <div className="ninja" key={ ninja.key }>
                <div>Name: { ninja.name }</div>
                <div>Age: { ninja.age }</div>
                <div>Belt: { ninja.belt }</div>
                </div>
            )
        })
        return (
            <div className="ninja-list">
                { ninjasList }
            </div>
        );
    }
}

export default Ninjas;

Answer 1

<Ninjas list={ this.state.ninjas }/>

我建议你把这个改成

<Ninjas ninjas={ this.state.ninjas }/>

否则该名称将list在您的子组件中。

换句话说，您在渲染组件时使用的属性名称（此处为App的render函数）必须与您从子组件中的props对象获得的名称相对应（此处您的子组件为Ninjas ）。

Answer 2

您正在使用列表道具在 Ninjas 组件<Ninjas list={ this.state.ninjas }/>中传递ninjas 。 所以，你应该使用这个const { list } = this.props; 而不是const { ninjas } = this.props; 在你的 Ninjas 组件中。

import React from 'react';

class Ninjas extends React.Component {
    render(){
        const { list } = this.props;
        const ninjasList = list.map(ninja => {
            return(
                <div className="ninja" key={ ninja.key }>
                <div>Name: { ninja.name }</div>
                <div>Age: { ninja.age }</div>
                <div>Belt: { ninja.belt }</div>
                </div>
            )
        })
        return (
            <div className="ninja-list">
                { ninjasList }
            </div>
        );
    }
}

export default Ninjas;