调用api后，ReactJs不会将数据生成到视图中

Question

我刚刚发现了reactjs，我不明白为什么我的代码不是错误但它无法呈现数据。

我尝试了测试功能来显示。它工作正常，但在getAllProducts函数中，在调用api后，似乎无法更新页面上的html代码。

我怎么了？

这是我的代码：

import React from 'react';
class ListObject extends React.Component {

    getAllProducts() {
        fetch("http://5bd054ce142d360013a172f3.mockapi.io/api/products")
            .then(res => res.json())
            .then((result) => {

                // return (<h1>Why not display????</h1>);
                result.map(
                    (product, i) => {
                        return <TableRow key={i} data={product} />
                    }
                )
            },
                (error) => {
                    return "errrr";
                }
            )
    }

    test() {
        return (<h1>Hello World</h1>);
    }

    render() {
        return (
            <div className="container-fluid">
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Avatar</th>
                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.getAllProducts()}
                    </tbody>
                </table>
                {this.test()}
            </div>
        );
    };
}


class TableRow extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.data.id}</td>
                <td>{this.props.data.name}</td>
                <td>{this.props.data.avatar}</td>
                <td>{this.props.data.createdAt}</td>
            </tr>
        );
    };
}

export default ListObject

Answer 1

你似乎完全错了。在React中，您需要根据组件的state和props呈现数据。所以，你必须做这样的事情：

class YourComponent extends React.Component {
  getAllProducts() {
    // you can handle a "loading" state as well
    this.setState({isLoading: true});
    fetch("http://example.com/api/products")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            products: result,
            isLoading: false,
          });
        },
        (error) => {
          return this.setState({hasError: true, error})
        }
      );
    }
  }
  componentDidMount() {
    fetchAllProducts();
  }
  render() {
    const {products, isLoading, hasError} = this.state;

    if (hasError) {
      return (
        <p>Something bad happened</p>
      );
    }

    if (isLoading) {
      return (
        <p>Hey, we're fetching data...</p>
      );
    }
    return (
      <table>
        {products.map(p => <TableRow ... />)
      </table>
    )
  }
}

注意：我使用了一些你应该了解的概念，所以这里有一些文档：

了解componentDidMount() here

我们可以在组件类上声明特殊方法，以便在组件安装和卸载时运行一些代码。在将组件输出呈现给DOM之后，componentDidMount()方法运行。

了解州here

Answer 2

更改你的getAllProducts并将状态对象添加到组件，如下所述。 API调用是异步的，因此您无法直接返回它。你能做的就是使用组件状态。并在componentDidMount中进行api调用以获取api数据。

class ListObject extends React.Component {
  state = {
    result: []
  };
  componentDidMount() {
    this.getAllProducts();
  }
  getAllProducts() {
    return fetch("https://5bd054ce142d360013a172f3.mockapi.io/api/products")
      .then(res => res.json())
      .then(result => {
        // return (<h1>Why not display????</h1>);
        this.setState({
          result
        });
      })
      .catch(e => {
        //dispatch some action to showcase error or
        //make state update using setState to show error
        return null;
      });
  }
  getProductListUI = () => {
    const { result } = this.state;
    return result.map((product, i) => <TableRow key={i} data={product} />);
  };
  test() {
    return <h1>Hello World</h1>;
  }

  render() {
    return (
      <div className="container-fluid">
        <table className="table table-hover">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Avatar</th>
              <th>Created At</th>
            </tr>
          </thead>
          <tbody>{this.getProductListUI()}</tbody>
        </table>
        {this.test()}
      </div>
    );
  }
}

class TableRow extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.data.id}</td>
        <td>{this.props.data.name}</td>
        <td>{this.props.data.avatar}</td>
        <td>{this.props.data.createdAt}</td>
      </tr>
    );
  }
}

ReactDOM.render(<ListObject />, document.getElementById("root"));

这是codepen链接工作：working codepen link欢迎提供反馈谢谢