函数作为反应孩子无效? - 需要帮助将提取的数据提取到表中

问题描述 投票:-1回答:2

我的作业项目的快速摘要。

我的后端有一个REST API,它有一个API方法从外部API返回星球大战的字符。

在我的Web开发中,我试图从我的REST API中获取这些数据,我可以看到数据实际显示在浏览器开发人员工具中,但是我收到了另一个错误。

“警告:index.js:1437警告:函数作为React子函数无效。如果你返回一个Component而不是render,可能会发生这种情况。或许你打算调用这个函数而不是返回它。”

你可以在下面的.js文件中看到出了什么问题吗?

import React, {Component} from "react";
import {Table,} from 'react-bootstrap'

const urlCharacters = 'URL WORKS - BUT NOT SHOWING HERE.';

class Characters extends Component {
constructor(props) {
  super(props);
  this.state = {characters: []}
    ;
  }

  async componentDidMount() {
      //async fetchCharactersFromBackend(){
        const res = await fetch(urlCharacters);
        const data = await res.json();
        console.log(data);
        const newData = data.map(e => JSON.parse(e.name));
        this.setState([newData]);
        }

render() {
  if (!this.state.characters) {
      return null
    }
  return (
    <div>
    <h2>Persons table</h2>
    <Table striped bordered hover>

      <thead>
        <tr>
          <th>Character Name</th>
        </tr>
      </thead>
      <tbody>
        {this.renderCharacters}
      </tbody>
      </Table>;

      </div>
  );
}
    renderCharacters(characters) {
      characters.forEach(e => {
        return ("<tr><td>" + e.name + "</td></tr>")
      });
    }
    }

  /*
  Persons = () => {
  return (
   <div>
  <h2>Persons table</h2>
  <Table striped bordered hover>

    <thead>
      <tr>
        <th>Character Name</th>
      </tr>
    </thead>
    <tbody>
      {this.renderCharacters}
    </tbody>
    </Table>;

    </div>
  );
};
*/





export default Characters;
javascript java reactjs
2个回答
0
投票

{this.renderCharacters}

应该

{this.renderCharacters()}


2
投票

执行以下操作并告诉我它是否有效:

this.setState([newData]);  --> this.setState({characters: newData})

{this.renderCharacters} --> {this.renderCharacters()}

将renderCharacters更新为以下内容:

    renderCharacters() {
        return this.state.characters.map(e => {
          return ("<tr><td>" + e.name + "</td></tr>")
        });
      }
    }