1 Вопрос: Реагировать на функцию карты в функции карты

вопрос создан в Thu, May 2, 2019 12:00 AM

Я очень новичок, чтобы реагировать, и я не могу найти информацию по проблеме ниже.

У меня есть массив объектов, а объекты содержат массивы. Я пытаюсь использовать функцию map для отображения элементов объектов, а затем снова функцию map для отображения элементов дочернего массива.

Посмотрите код ниже в методе рендеринга:

        <div>
                {this.state.questionarray.map( (item) => (<p>Question {item.questionno}<input type="text" id={item.questionno} />
                                                            <button id={item.questionno} onClick={this.handleAddAnswer}>Add Answer</button>
                                                            {item.answers.map( (ans) => ({ans.answerno}))}</p>
                ) ) }
            </div>

С учетом вышеизложенного я получаю сообщение "Не удалось скомпилировать ... Неожиданный токен, ожидается", "" Если я удаляю внутреннее сопоставление и заменяю на item.answers.length, то получаю длину массива, которая говорит о том, что массив определенно есть. Я предполагаю, что это связано с синтаксисом, который распознает JSX. Кто-нибудь может помочь? Есть ли правильный способ сделать это?

    
0
  1. {ans.answerno} не является допустимым JavaScript (это не контекст JSX). Вы хотите ans => ans.answerno.
    2019-05-02 15: 00: 19Z
  2. Пожалуйста, предоставьте образец объекта.
    2019-05-02 15: 05: 10Z
  3. Большое спасибо, похоже, работает. Как это работает, если я хочу установить ans.answerno в качестве свойства id поля ввода. Я попытался "ans = > < input type =" text "id = ans.answerno />"
    2019-05-02 15: 10: 32Z
  4. Это правильно? {item.answers.map (ans = > (< input type = "text" id = {ans.answerno} />) )} "? Кажется, это работает, когда я использую этот синтаксис.
    2019-05-02 15: 13: 14Z
  5. Да, второй правильный. Это снова внутри JSX, поэтому вам нужно {...}, чтобы указать, что контент должен оцениваться как JavaScript.
    2019-05-02 16: 06: 47Z
1 ответ                              1                         

Просто чтобы поместить комментарий Феликса в поле для ответов , поскольку это ответ, {ans.answerno} должен быть просто ans.answerno, потому что обратный вызов map не является контекстом JSX и {ans.answerno} не является допустимым JavaScript (в контексте выражения JavaScript).

<div>
{this.state.questionarray.map( (item) => (
    <p>Question {item.questionno}
        <input type="text" id={item.questionno} />
        <button id={item.questionno} onClick={this.handleAddAnswer}>Add Answer</button>
        {item.answers.map( (ans) => (ans.answerno  /* <== No {} around this */))}
    </p>
))}
</div>
    
0
2019-05-02 15: 05: 04Z
источник размещен Вот