React Router 从 API 获取数据

Question

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

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

      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} />

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

Answer 1

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

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

您的 class 组件中还有一些其他奇怪的错误，例如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>
    );
  }
}

Answer 2

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

相反，将获取调用添加到 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>
    );
  }
}

React Router 从 API 获取数据

React Router Fetching data from API

api

ajax

json

router

reactjs