React Router 从 API 获取数据答案

【问题标题】：React Router Fetching data from APIReact Router 从 API 获取数据
【发布时间】：2020-03-30 19:27:39
【问题描述】：

我是新来的反应，现在正在开发一个必须从 API 获取一些数据的应用程序。

我的组件应该获取数据并取回 Json 对象并填充表格。

      class RenderTable() extends React.Component {
    render() {
      fetch("http://localhost:6002/api?act=getall")
     .then(data=> data.json())
     .then(
       result => {
       this.setState({
        library: result
      });
        console.log(this.state.result);
    },
    error => {
      this.setState({
        library: "error"
      });
      return null;
    }
  );
}

render() {
return (
  <div id="libTable">
    <table>
      <tbody>
        <tr>
          <th>Genre</th>
          <th>Description</th>
          <th>Date</th>
          <th>Price</th>
        </tr>
        <tr>
          <td>{JSON.stringify(this.state.library)}</td>
        </tr>
      </tbody>
    </table>
  </div>
);

} }

 <Route path="/RenderTable" component={RenderTable} />

我的库是一个数组，我在我的主应用程序容器中初始化为一个空数组。路由路径在我的主应用程序中的渲染下。非常感谢任何帮助。

【问题讨论】：

您必须映射整个状态才能使其工作。

标签： json ajax reactjs api router

【解决方案1】：

看起来你有两个渲染函数。除非自从我上次更新 React 以来发生了一些变化，否则这将行不通。无论如何，您不应该在渲染函数中设置状态，这纯粹是为了渲染您的控件。

相反，将 fetch 调用添加到 componentWillMount

编辑： componentWillMount 已弃用，请改用 componentDidMount（如其他答案中所述，具体取决于您的 React 版本）

class RenderTable() extends React.Component {

componentDidMount () {
  fetch("http://localhost:6002/api?act=getall")
     .then(data=> data.json())
     .then(
       result => {
       this.setState({
        library: result
      });
        console.log(this.state.result);
    },
    error => {
      this.setState({
        library: "error"
      });
      return null;
    }
  );
}

render() {
    return (
      <div id="libTable">
        <table>
          <tbody>
            <tr>
              <th>Genre</th>
              <th>Description</th>
              <th>Date</th>
              <th>Price</th>
            </tr>
            <tr>
              <td>{JSON.stringify(this.state.library)}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

像这样在渲染方法中映射你的状态：

return (
  <div id="libTable">
    <table>
      <tbody>
        <tr>
          <th>Genre</th>
          <th>Description</th>
          <th>Date</th>
          <th>Price</th>
        </tr>
        {this.state.library.map(book => (
          <tr>
            <td>{book.genre}</td>
            <td>{book.description}</td>
            <td>{book.date}</td>
            <td>{book.price}</td>
          </tr>
          ))}
      </tbody>
    </table>
  </div>
);

您的类组件中还有一些其他奇怪的错误，例如2 渲染方法。一个可能的正确实现如下所示：

class RenderTable extends React.Component {
  state = {
    library: [],
    error: ""
  };

  componentDidMount() {
    fetch("http://localhost:6002/api?act=getall")
      .then(data => data.json())
            .then(result => {
        this.setState({
          library: result
        });
        console.log(this.state.result);
      })
      .catch(error =>
        this.setState({
          error
        })
      );
  }

  render() {
    return (
      <div id="libTable">
        <table>
          <tbody>
            <tr>
              <th>Genre</th>
              <th>Description</th>
              <th>Date</th>
              <th>Price</th>
            </tr>
            {this.state.library.map(book => (
              <tr>
                <td>{book.genre}</td>
                <td>{book.description}</td>
                <td>{book.date}</td>
                <td>{book.price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

【讨论】：