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

IT技术 reactjs react-props
2021-04-22 02:42:51

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

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

我的react组件（减少）是另一个组件

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;

正如您从上面的代码段中看到的，我试图通过在 props 中使用数组 Answers 来插入组件 Answers 的数组，它确实会迭代但不会输出到 HTML 中。

1个回答

您需要将元素数组传递给jsx. 问题是forEach不返回任何东西（即它返回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;
在某些情况下，使用 var i 作为 key 对于虚拟 dom 不是一个好的选择。
2021-06-01 02:42:51
FWIW 您还可以传入其他类型的集合。您只需要展开它们，它们就可以与.map(). 例如Object.keys(collection).map(key => ...并分配一个变量以方便使用collection[key]
2021-06-16 02:42:51
@maquannene 确实感谢您指出这一点。这是一篇关于为什么medium.com/@robinpokorny/...
2021-06-21 02:42:51
其它你可能感兴趣的问题
上一篇危险的SetInnerHTML 的安全替代方案 下一篇React 16 中的类与类名