我在使用 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;