我如何在reactJs中显示API结果

Posted 2021-04-13

如何在React中显示以下API结果？

我用来从url获取api数据的代码

constructor(props) {
        super(props);
        this.state = { results: [] };
    }

    componentDidMount() {
           fetch('http://web.api.services/api/v2/tultula/employees/all', {
            method: 'GET',
            headers: {
                'api-key': '7cefc4163dula77bf0f41ba741c'  
            }
        })
            .then(results => results.json())
            .then(data => this.setState({ results: data }));
    }
    static renderemployeeTable(results) {
        return (

            <div class="container-fluid" class="row" fluid={true}>
                {
                    results.map(results =>
                        <div class="col-sm-3" key={results.Employee_Number}>
                            <div class="card our-team" >
                                <div class="card-body">

                                    <p class="card-text">{results.first_name}</p>
                                    <p class="card-text">{results.last_name}</p>
                                </div>
                            </div>
                            <a href="#" class="btn btn-primary">Detail</a>
                        </div>
                    )
                }
            </div>
        );
    }
    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : FetchData.renderemployeeTable(this.state.results);

        return (
            <div>
                <h1 id="tabelLabel" >-</h1>


                {contents}
            </div>
        );

    }
    async populateemployeeData() {
        const response = await fetch('table');
        const data = await response.json();
        this.setState({ results: data, loading: false });
    }
}

但是这给了我这行错误信息

TypeError：results.map不是函数Function.renderemployeeTable

我尝试用下面的api数据替换此行this.state = { results: [] };，并能够使用<h3 class="title">{results.data.Table[0].first_name}{results.Table[0].last_name}</h3>显示它

  this.state = { results:[{"data":{"Table":[{"id":14069,"Employee_Number":14069,"first_name":"Kuku","last_name":"gebre"},]}}] };

API数据

{"data":{"Table":[{"id":14069,"Employee_Number":14069,"first_name":"Kuku","last_name":"gebre"},]}}

答案

您需要存储状态或将其作为道具进行展示。

<div>{data.Table[0].first_name}</div>

另一答案

 constructor(props) {
    super(props);
    this.state = { jsonData: [] };
  }

  fetchJsonData = () => {
    return fetch("http://dummy.restapiexample.com/api/v1/employees")
      .then(response => response.json())
      .then(data => {
        return data;
      })
      .catch(error => console.log(error));
  };

  componentDidMount() {
    this.fetchJsonData().then(data => {
      console.log(data);
      this.setState({
        jsonData: data
      });
    });
  }
  render() {
    return this.state.jsonData.map((data, i) => {
      return (
        <div>
          {data.employee_name},{data.id}
        </div>
      );
    });
  }
}

另一答案

   constructor(props) {
    super(props);
    this.state = {
 jsonData:''}}
  fetchJsonData = () => {
      return fetch('http://172.16.0.140:3005/api/v3/users/faq')
        .then(response => response.json())
        .then(jsonData => {
          return jsonData;
        })
        .catch(error => console.log(error))
    }
     componentDidMount() {
        fetchJsonData().then(data => {
          this.setState({
            jsonData: data,
          });
        });
      }

     render() {
        return (
          this.state.jsonData.map((data, i) => {
            return (
    <div>{data.Table[0].id},{data.Table[0].first_name},{data.Table[0].last_name}
    </div>
    )}))}