在React JSX中，forEach()不会输出任何HTML。

11 浏览
0 Comments

在React JSX中，forEach()不会输出任何HTML。

我有一个对象，我想通过React输出：

question = {
    text: "这是一个好问题吗？",
    answers: [
       "是的",
       "不是",
       "我不知道"
    ]
}

而我的React组件（简化版）是另一个组件

class QuestionSet extends Component {
render(){ 
       
{this.props.question.text}

       {this.props.question.answers.forEach(answer => {     
           console.log("已进入");  //这个是有效的                       
              //这个无效 
        })}
}
export default QuestionSet;

如你所见，我正在尝试通过使用props中的Answers数组插入Answer组件的数组，它可以迭代，但不会输出到HTML中。

0

1 答案

0 Comments

在React JSX中，使用forEach()方法时不会输出任何HTML。问题出在forEach()方法不返回任何内容（即返回undefined）。因此，最好使用map()方法，因为map()方法会返回一个数组：

class QuestionSet extends Component {
    render() {
        return (
            

                
{this.props.question.text}

                {this.props.question.answers.map((answer, i) => {
                    console.log("Entered");
                    // 返回元素并传递key
                    return ()
                })}
            

        );
    }
}
export default QuestionSet;

在某些情况下，使用var i作为key不是一个好选择，因为虚拟dom中可能会出现问题。感谢指出这一点。这里有一篇关于为什么index作为key是一个反模式的好文章：medium.com//…

另外，你也可以传递其他类型的集合。你只需要将它们展开，以便与.map()方法一起使用。例如：Object.keys(collection).map(key => ...并为方便使用collection[key]分配一个变量。

0