Json React路由器从API获取数据

我是个新手，现在正在开发一个应用程序，它必须从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>
);

} }

我的库是一个数组，我在主应用程序容器中将其初始化为空数组。 路由路径位于“渲染”下的“我的主应用程序”中。

---

非常感谢您的帮助。

在渲染方法中映射您的状态，如下所示：

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

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

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

---

看起来您有两个渲染函数。除非我上次更新后有所改变，否则这不会起作用。无论如何，不应在渲染函数中设置状态，该函数纯粹用于渲染控件

相反，将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>
    );
  }
}

---

为了让它工作，你必须映射整个州。