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

Question

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

TypeError:ninjas is undefined

这是我发送 Prop 的方式

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)。