ReactJs的setState结果未使用映射进行渲染

Question

我正试图在setState之后呈现我的setState结果。我的constructor和componentDidMount()从API 获取数据

constructor() {
super();
this.state = {
students: [],
}
}
componentDidMount() {
axios.get("http://localhost:3333/").then((data) => {
this.setState({students:data.data});
console.log(this.state.students[0]);
});
}

在这里，我的console.log返回我的students[0]的信息

Object { _id: "5eb44aa2bbf7137f6ed8ca3e", username: "User", email: "[e-mail]", mdp: "usermdp" }

我正试图用映射的函数来渲染它(和我所有的其他学生一起(

render() {
return (
<div>
<h1>Hello World</h1>
{this.state.students.map(e  => {
return (
<Sub name={e} />
)}
)}
</div>
);

}

该渲染使用了我的class Sub，这是一个非常简单的

class Sub extends React.Component {
render () {
return (
<div>
<h2>{this.props.e}</h2>
</div>
);
}
}

然而，仅呈现<h1>Hello World</h1>。

Answer 1

问题来自.map()，e是当前迭代的数组元素，您需要使用e的属性之一。通过这种方式，您可以传递整个对象。第二个问题是e只是父组件中的一个变量，根据您的代码<Sub name={e} />，道具的名称是<Sub>组件中的name。

当使用<Sub>组件时，您应该为name道具传递username属性，如下所示：

{this.state.students.map(e  => {
return (
<Sub name={e.username} /> { /* username property */ }
)}
)}

您应该在<Sub>组件中具有属性name，然后：

class Sub extends React.Component {
render () {
return (
<div>
<h2>{this.props.name}</h2>
</div>
);
}
}

我希望这能解释。