Question

我有一个用于存储数据的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函数之前，我也尝试过this solution，但是却遇到了同样的错误...
另外，如果我将{entry.replies}放在html代码中，它也会呈现字符串列表。

有人知道我为什么会收到此错误以及如何显示我的回复列表吗？谢谢。

Answer 1

{this.state.list.map(function(entry) {

将其更改为箭头功能。箭头函数从定义它们的上下文中获取this的值，这意味着函数this内将继续成为您的组件

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

Answer 2

我认为您的问题可能不是将函数绑定到类上。尝试将以下代码行添加到构造函数中：

this

或者，您可以使用箭头功能来维护“ this”的上下文。看起来像这样：

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

Answer 3

最可能是因为this.renderReplies在覆盖function(){}的{{1}}内部被调用。您可以使用如下箭头功能来避免这种情况：

this

您可以在箭头功能here上进一步了解this.state.list.map(entry => { ... { this.renderReplies(entry.replies) } ... });

对象数组循环中的循环

3 个答案: