gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 10:58:16 25 4
gpt4 key购买 nike

我正在发送一个对象数组作为 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

换句话说,您在渲染组件时使用的属性名称(这里是 Apprender 函数)必须与您从props 对象在你的子组件中(这里你的子组件是 Ninjas)。

关于javascript - 我在使用 React 制作的项目中遇到未定义的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59120090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com