forEach () в React JSX не выводит 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;

как видно из приведенного выше фрагмента, я пытаюсь вставить массив компонента Answer, используя массив Answers в реквизитах, он повторяется, но не выводится в HTML.


reactjs react-props
person michael    schedule 03.12.2017    source источник

Ответы (1)


arrow_upward
270
arrow_downward

Вам нужно передать массив элементов в 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;
person Prakash Sharma    schedule 03.12.2017
comment
Использование var i в качестве ключа - не лучший выбор в некоторых ситуациях для виртуального домена. - person maquannene; 01.03.2019
comment
@maquannene Действительно, спасибо, что указали на это. Вот хороший пост о том, почему medium.com / @ robinpokorny / - person cyberwombat; 11.03.2020
comment
FWIW также можно передать в другие виды коллекций. Вам просто нужно их развернуть, чтобы они работали с .map(). например Object.keys(collection).map(key => ... и назначьте переменную для удобной работы с collection[key] - person John Kaster; 03.04.2020