在 React JS 中映射对象数组和显示表行时没有得到任何输出

Question

我有一个对象数组，我想在表格中显示它的值 这就是我的数组的样子：

[{name: 'x', mobile: 'xxx'}, {name: 'y', mobile: 'yyy'}, ......]

我想在表格中显示它。 这是我到目前为止尝试过的

import React, { Component } from 'react';
import {
    Table,
    ProgressBar
} 
from 'react-bootstrap';

class Display extends Component {

  render() {
    var records = this.props.googleData;
    const API = this.props.api;
    const placeURI = this.props.placeURI;
    var rows = [];
    for(let p_id of records.results){
        let dataURI = `${placeURI}${p_id.place_id}${API}`;
        let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
        targetUrl = dataURI
        fetch(proxyUrl + targetUrl)
        .then((res) => res.json())
        .then((data) => {
            let jsonData = JSON.parse(JSON.stringify(data));
            //console.log(jsonData);
            rows.push(jsonData.result);
        })
        .catch((e)=> console.log(`Error! ${e.message}`));
    }
    console.log(rows);

    return (
        <div>
            <ProgressBar now={45} />
            <Table striped bordered condensed hover responsive>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Full Address</th>
                  <th>Phone Number</th>
                  <th>International P.no</th>
                  <th>Website</th>
                  <th>Rating</th>
                </tr>
              </thead>
              <tbody>
                {rows.map(( listValue, index ) => {
                  return (
                    <tr key={index}>
                      <td>{listValue.name}</td>
                      <td>{listValue.title}</td>
                      <td>{listValue.price}</td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
        </div>
    );
  }
}

export default Display;

这就是我的数组的样子

但是map() 没有返回任何行。如果有任何建议可以改进我的代码，那是非常可观的。请帮忙

Answer 1

    import React, { Component } from 'react';
    import {
        Table,
        ProgressBar
    } 
    from 'react-bootstrap';

    class Display extends Component {
        constructor(props) {
            super(props);
            this.state={
                rows: []
            }
        }


    componentDidMount = () => {
        var records = this.props.googleData;
        const API = this.props.api;
        const placeURI = this.props.placeURI;
        var rows = [];
        for (let p_id of records.results) {
            let dataURI = `${placeURI}${p_id.place_id}${API}`;
            let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
                targetUrl = dataURI
            fetch(proxyUrl + targetUrl)
                .then((res) => res.json())
                .then((data) => {
                    let jsonData = JSON.parse(JSON.stringify(data));
                    //console.log(jsonData);
                    rows.push(jsonData.result);
                })
                .catch((e) => console.log(`Error! ${e.message}`));
        }
        this.setState({
            rows:rows
        })
        console.log(rows);
    };

      render() {

    return (
        <div>
            <ProgressBar now={45} />
            <Table striped bordered condensed hover responsive>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Full Address</th>
                  <th>Phone Number</th>
                  <th>International P.no</th>
                  <th>Website</th>
                  <th>Rating</th>
                </tr>
              </thead>
              <tbody>
                {this.state.rows.map(( listValue, index ) => {
                  return (
                    <tr key={index}>
                      <td>{listValue.name}</td>
                      <td>{listValue.title}</td>
                      <td>{listValue.price}</td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
        </div>
    );
  }

    }

    export default Display;