如何将 JSON 中的数据保存在 state 中以便以后生成视图

Question

由于我是使用 React 的新手，我有一个问题 - 如何正确保存从 API 调用收到的数据，以便最终生成表格/图表。我需要生成一个表格，所以我可以显示每个软件的主机信息

我的 API 调用：

    state= {
    hosts: [] ,
}


    componentDidMount(){
    Axios.get('https://api.jsonbin.io/b/5cffb00158196b429f524168').then(
        response => {
          this.setState( {hosts: response.data})

          console.log(response);
          console.log(response.data.host[0].meta.name);
          console.log(response.data.host[1].meta.name);
          console.log(response.data.host[0].software[0].name)
          console.log(response.data.host[0].software[1].name)

        }
    )
  } 

当我尝试获取 console.log 中某个元素的数据时，一切正常。当我后来尝试制作地图时，我可以显示每个主机的软件，我没有正确获取数据。我不确定我是否在数据保存或稍后地图功能中出错

我的餐桌试用：

 <TableSoftware hosts={this.state.hosts}>h</TableSoftware>

表格软件：

 <Table >
            <thead>
             <tr>

            <th className="softname">SoftName</th>
            <th className="vendor">Vendor</th>
            <th className="CPE">CPE</th>
            <th className="CVE">CVE:</th>
            <th className="CVSS">CVSS:</th>
            <th className="DESC">Desc:</th>
            <th className="LINK">Link:</th>
           </tr>
          </thead>
          <tbody>
          {this.props.hosts.map(function(hoste, index) {
           return(
          <tr>
          <td>{hoste.software.name}</td>
          <td>{hoste.software.vendor}</td>
          <td>{hoste.software.cpe}</td>
           <td>{hoste.software.vulnerability.cve}</td> 
          <td>{hoste.software.vulnerability.cvss}</td>
           <td>{hoste.software.vulnerability.desc}</td>
            <td key={index}><Button variant="link" type="submit" >{hoste.software.vulnerability.link}</Button></td> */}

        </tr>)})}

Answer 1

如果我对您的理解正确，您是在问如何设置状态。尝试使用此功能：

updateState = () => {
    this.setState({
      ...this.state,
      key: value,
      key2: value2,
    })
  }

您需要确定您想要的键值对是什么，但这是在不改变状态的情况下设置状态的最常用方法。

Answer 2

这是因为 API 请求可能在您的子组件渲染时尚未完成。子组件将无法访问数据并抛出错误。所以你要做的就是检查请求是否完成，如果是，你可以让 React 渲染子组件。

Answer 3

要么迭代this.props.hosts.host，要么只将主机对象存储在this.setState( {hosts: response.data.host})状态中

请记住，software 是一个最需要以下更改的数组

<td>hoste.software[0].name}</td>
<td>{hoste.software[0].vendor}</td>
<td>{hoste.software[0].cpe}</td>
<td>{hoste.software[0].vulnerability.cve}</td> 
<td>{hoste.software[0].vulnerability.cvss}</td>
<td>{hoste.software[0].vulnerability.desc}</td>

Answer 4

这是因为组件在异步数据到达之前渲染，你应该控制之前渲染

    {
    this.props.hosts &&
    this.props.hosts.host &&
    this.props.hosts.host.map(function(item, i) {
    return (
        <div key={i}>
        <h2> {item.meta.name}</h2>

        {item.software.map((sub, subindex) => (
            <p key={subindex}>{sub.name}</p>
        ))}
        </div>
    );
    });
}

Answer 5

遍历主机并将每个主机传递给您的表格组件。内部表格组件循环通过软件。

render() {
  const hosts = this.state.hosts.host || [];
  return (
    <div>
      {hosts.map(host => <TableSoftware hosts={host}></TableSoftware>
      )}
    </div>
  );
}

循环通过hosts.software

<table>
  <thead>
    <tr>

      <th className="softname">SoftName</th>
      <th className="vendor">Vendor</th>
      <th className="CPE">CPE</th>
      <th className="CVE">CVE:</th>
      <th className="CVSS">CVSS:</th>
      <th className="DESC">Desc:</th>
      <th className="LINK">Link:</th>
    </tr>
  </thead>
  <tbody>
    {this.props.hosts.software.map(function (hoste, index) {
      return (
        <tr>
          <td>{hoste.name}</td>
          <td>{hoste.vendor}</td>
          <td>{hoste.vulnerability.cpe}</td>
          <td>{hoste.vulnerability.cve}</td>
          <td>{hoste.vulnerability.cvss}</td>
          <td>{hoste.vulnerability.desc}</td>
          <td key={index}><button variant="link" type="submit" >{hoste.vulnerability.link}</button></td> */}

  </tr>)
    })}
  </tbody>
</table>

演示

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class TableSoftware extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>

            <th className="softname">SoftName</th>
            <th className="vendor">Vendor</th>
            <th className="CPE">CPE</th>
            <th className="CVE">CVE:</th>
            <th className="CVSS">CVSS:</th>
            <th className="DESC">Desc:</th>
            <th className="LINK">Link:</th>
          </tr>
        </thead>
        <tbody>
          {this.props.hosts.software.map(function (hoste, index) {
            return (
              <tr>
                <td>{hoste.name}</td>
                <td>{hoste.vendor}</td>
                <td>{hoste.vulnerability.cpe}</td>
                <td>{hoste.vulnerability.cve}</td>
                <td>{hoste.vulnerability.cvss}</td>
                <td>{hoste.vulnerability.desc}</td>
                <td key={index}><button variant="link" type="submit" >{hoste.vulnerability.link}</button></td>
               

        </tr>)
          })}
        </tbody>
      </table>
    )
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      hosts: [],
    };
  }

  componentDidMount = () => {
    fetch('https://api.jsonbin.io/b/5cffb00158196b429f524168')
    .then(response => response.json())
    .then(data => {
      this.setState({ hosts: data })
    })
  }

  render() {
    const hosts = this.state.hosts.host || [];
    return (
      <div>
        {hosts.map(host => {


          return <TableSoftware hosts={host}>h</TableSoftware>

        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
</script>