如何从 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

您可以使用 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>
        );
    }
}

Answer 2

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

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

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

Answer 3

理想情况下，您希望 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>
    );
  }

希望这会有所帮助。