React JSX 中的 forEach ()不输出任何 HTML

我有一个想要通过 React 输出的对象:

question = {
text: "Is this a good question?",
answers: [
"Yes",
"No",
"I don't know"
]
}

和我的反应组成部分(削减) ，是另一个组成部分

class QuestionSet extends Component {
render(){
<div className="container">
<h1>{this.props.question.text}</h1>
{this.props.question.answers.forEach(answer => {
console.log("Entered");  //This does ifre
<Answer answer={answer} />   //THIS DOES NOT WORK
})}
}


export default QuestionSet;

正如你可以从上面的片段看到，我试图插入一个数组的组件答案通过使用道具中的数组答案，它不迭代，但没有输出到 HTML。

379455

小开

最佳答案

您需要向 jsx传递一个元素数组。问题是 ABC1不返回任何内容(即它返回 undefined)。因此最好使用 map，因为 map返回一个数组:

class QuestionSet extends Component {
render(){
<div className="container">
<h1>{this.props.question.text}</h1>
{this.props.question.answers.map((answer, i) => {
console.log("Entered");
// Return the element. Also pass key
return (<Answer key={answer} answer={answer} />)
})}
}


export default QuestionSet;