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

Posted 2021-04-04

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

我的后端有一个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;

答案

{this.renderCharacters}

应该

{this.renderCharacters()}

另一答案

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

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>")
        });
      }
    }