javascript - 如何从 Nodejs 后端的 JSON 填充 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) 获取每个证书的名称