我正在发送一个对象数组作为 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;
最佳答案
<Ninjas list={ this.state.ninjas }/>
我建议你把这个改成
<Ninjas ninjas={ this.state.ninjas }/>
否则在您的子组件中名称将是 list
。
换句话说,您在渲染组件时使用的属性名称(这里是 App
的 render
函数)必须与您从props
对象在你的子组件中(这里你的子组件是 Ninjas
)。
关于javascript - 我在使用 React 制作的项目中遇到未定义的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59120090/