如何从JSON Nodejs后端填充React数组

Question

我对 React 很陌生。我已经设置了一个 Nodejs 后端，它以以下格式读取 JSON 文件：

{
    "cert1" : {
        "name" : "www.google.com",
        "state" : "valid",
        "days" : "482"
    },
    "cert2" : {
        "name" : "www.facebook.com",
        "state" : "valid",
        "days" : "182"
    },
    .
    .
    .
}

我想在表中显示这些数据，首先需要将其放入数组中。我设法使用以下代码显示www.google.com。

class App extends Component {
  state = {
    name  : '',
    state : '',
    days  : '',
    response : ''
  };

  componentDidMount() {
    this.callApi()
      .then(res => {
        this.setState({ 
          response: res.cert1.name
        })
      })
      .catch(err => console.log(err));
  }

  callApi = async () => {
    const response = await fetch('/list-certs');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);
    return body;
  };
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          {this.state.response}
        </p>
      </div>
    );
  }
}

如何映射整个 JSON 文件并使用所有条目填充一些数组？现在我正在调用res.cert1.name但 JSON 文件中的每个证书条目都有不同的名称(cert1、cert2、cert3 等(，那么如何将res.cert1.name转换为 JSON 文件中任何证书条目的通用调用？

Answer 1

理想情况下，您希望 JSON 是一个数组，而不是对象的对象：

[
    {
        "name" : "www.google.com",
        "state" : "valid",
        "days" : "482"
    }, {
        "name" : "www.facebook.com",
        "state" : "valid",
        "days" : "182"
    }
]

然后在前端，您可以使用res.map(x => x.name)获取每个证书的名称

Answer 2

理想情况下，您希望 json 结果是一个数组。

从 API 检索时，可以使用结果设置状态。

这取决于您的 API 的外观，但是如果您返回包含项目数组的 JSON 对象并将其存储在状态中......

componentDidMount() {
    this.callApi()
      .then(res => {
        this.setState({ 
          results: res.body
        })
      })
      .catch(err => console.log(err));
  }

然后，您可以在渲染中执行地图功能。

render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          { this.state.results.map((row) => {
               return <p>{row.name}</p>
          }) }
        </p>
      </div>
    );
  }

希望这有帮助。

Answer 3

您可以使用

Object.keys和Array.map从JSON对象构建一个数组，并映射到该数组上以呈现元素。

样本：

class App extends Component {
    state = {
        name  : '',
        state : '',
        days  : '',
        response : []
    };

    componentDidMount() {
        this.callApi()
            .then(res => {
                this.setState({
                    response: Object.keys(res).map(key=>({...res[key], id:key}))
                })
            })
            .catch(err => console.log(err));
    }

    callApi = async () => {
        const response = await fetch('/list-certs');
        const body = await response.json();
        if (response.status !== 200) throw Error(body.message);
        return body;
    };
    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Welcome to React</h2>
                </div>
                <p className="App-intro">
                    {this.state.response.map(item => (<p>{item.name}</p>))}
                </p>
            </div>
        );
    }
}