Цикл в цикле массива объектов - PullRequest
Новая
       8

Цикл в цикле массива объектов

0 голосов
/ 07 сентября 2018

У меня есть файл JSON для моих данных: 

{
  "EIC": {
    "id": "EIC",
    "text": "Want to do a quick word game?",
    "replies": ["Sure", "Later"]
  },
  "YMB": {
    "id": "YMB",
    "text": "Okay, tomorrow. Cya!",
    "replies": ["bye Woebot"],
  }
}

Я хочу отобразить массив ответов, чтобы мы могли видеть различные возможные ответы в HTML.
Вот мой компонент на данный момент: 

import React from 'react';
import axios from 'axios';
import style from "../styles/entry.css";

import * as allornothing from '../allornothing.json';

class EntryList extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      list: Object.values(allornothing)
    }
  }

  renderReplies(replies) {
    return replies.map((reply) => {
        return (
            <div class="entry-body col-12">
                <button class="back">{ reply }</button>
            </div>
        )
    })
  }

  render() {
    return (
      <div class="row" id="entries-list">
        {this.state.list.map(function(entry) {
          return (
            <div class="col-md-4 col-sm-12">
              <div class="entry col-12">
                <div class="row">
                  <div class="entry-header col-12">
                    <div class="entry-id">
                      <span>{entry.id}</span>
                    </div>
                    <p>{entry.text}</p>
                  </div>

                  { this.renderReplies(entry.replies) }

                  <div class="entry-manage col-12">
                    <div class="row">

                      <span class="manage-button">
                        <i class="fas fa-comments"></i> Add new answer
                      </span>

                      <span class="manage-button">
                        <i class="fas fa-pencil-alt"></i> Modify
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default EntryList

Но я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'renderReplies' из неопределенного

Хотя, если я заменю { this.renderReplies(entry.replies) } на console.log(entry.replies), он печатает ответы на все вопросы. Я также попробовал это решение , прежде чем придумать функцию renderReplies, но у меня просто та же ошибка ...
Также, если я добавлю {entry.replies} в мой HTML-код, он также отобразит список строк.

Кто-нибудь знает, почему я получаю эту ошибку и как я могу отобразить свой список ответов? Спасибо.

Ответы [ 3 ]

0 голосов
/ 07 сентября 2018

Скорее всего, потому что this.renderReplies вызывается внутри function(){}, который переопределяет this. Вы можете избежать этого, используя функцию со стрелкой, например: 

this.state.list.map(entry => {
...
{ this.renderReplies(entry.replies) }
...
});

Подробнее о this о функциях стрелки можно узнать здесь

0 голосов
/ 07 сентября 2018

Я думаю, что ваша проблема не в том, чтобы связать функцию с классом. Попробуйте добавить следующую строку кода в функцию конструктора: 

this.renderReplies = this.renderReplies.bind(this)

В качестве альтернативы вы можете использовать функцию стрелки для поддержания контекста 'this'. Который будет выглядеть так: 

renderReplies = replies => { ... }
0 голосов
/ 07 сентября 2018 
{this.state.list.map(function(entry) {

Вместо этого измените это на функцию стрелки. Функции со стрелками берут свое значение this из контекста, в котором они определены, что означает, что внутри функции this будет оставаться ваш компонент 

{this.state.list.map((entry) => {
...