Javascript 我的项目中有一个未定义的错误，使用React

我正在发送一组对象作为道具。当我使用console.logthis.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;

我建议你把这个改成

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

否则，名称将显示在子组件中的列表中

换句话说，在应用程序的渲染功能中渲染组件时使用的属性名称必须与从子组件中的道具对象获得的名称相对应。在子组件中，您的子组件是忍者

我建议你把这个改成

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

否则，名称将显示在子组件中的列表中

换句话说，在应用程序的渲染功能中渲染组件时使用的属性名称必须与您从子组件中的道具对象获得的名称相对应。您的子组件是忍者。

您正在使用列表道具传递忍者组件中的忍者。因此，您应该使用这个常量{list}=this.props；而不是const{ninjas}=this.props；在你的忍者部分

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;

您正在使用列表道具在忍者组件中传递忍者。因此，您应该使用这个常量{list}=this.props；而不是const{ninjas}=this.props；在你的忍者部分

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;

---

这个道具中有数组的道具的名称是什么。道具？？？你能显示你传递忍者和调用组件的代码吗。没有这些代码是不可理解的；这个道具中有数组的道具的名称是什么。道具？？？你能显示你传递忍者和调用组件的代码吗。没有这些代码是不可理解的；谢谢你的回答！，但是如果我这样做了，那么我就不能解决我的主要问题，那就是接收prop作为数组并映射它，这样我就可以将它分配给一个新的listIn呈现方法use const ninjas={this.props.list}@JuanPedroPontVergés根据您的编辑查看我的更新答案谢谢您的答案！，但是如果我这样做了，那么我就不能解决我的主要问题，那就是接收prop作为数组并映射它，这样我就可以将它分配给一个新的listIn呈现方法use const ninjas={this.props.list}@JuanPedroPontVergés根据您的编辑查看我的更新答案