ReactJS 使用动态键及其数据迭代状态数组

Question

我有一个数组，如：

"data": {
    "key1": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    },
    "key2": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    },
    "key3": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    }
}

我想用这个数组迭代并填充我的表，但我收到错误this.state.data.map() is not a function。

这是我的反应组件：

import React, { Component } from "react";
import $ from "jquery";
import axios from "axios";

class DataComponent extends Component {
  state = {
    data: [],
    isLoading: true
  };
  componentDidMount() {
    this.getData();
  }

  getData() {
    var curr_date = new Date().toISOString().substring(0, 10);
    const params = new FormData();
    params.append("date", curr_date);
    axios
      .post(`http://api.mydomain.in/getdataList/`, params)
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            data: res.data.data,
            isLoading: false
          });
        }
        if (!this.state.isLoading) {
          this.initTable();
        }

      })
      .catch(err => {
        console.log(err);
      });
  }

  initTable() {
    $("#my_table").DataTable({
      bLengthChange: false,
      lengthMenu: [[15, 15, 15, "All"]],
      language: {
        search: "_INPUT_",
        searchPlaceholder: "Search records"
      }
    });
  }

  render() {
    return (
      <div className="tab-pane active" id="mytab">
        <div className="inner-content table-responsive">
          <table id="my_table" className="display" style={{ width: "100%" }}>
            <thead>
              <tr className="heading-table">
                <th>Col1</th>
                <th>col2 </th>
                <th>col3 </th>
                <th>col4 </th>
                <th>col5 </th>
              </tr>
            </thead>
            {this.state.isLoading ? null : (
              <tbody>
                {this.state.data.map(d => (
                  <tr>
                    <td>{d}</td>
                    <td>{d.key_val1}</td>
                    <td>{d.key_val2}</td>
                    <td>{d.key_val3}</td>
                    <td>{d.key_val4}</td>
                  </tr>
                ))}
              </tbody>
            )}
          </table>
        </div>
      </div>
    );
  }
}

export default DataComponent;

this.state.data 将使用示例数组进行更新，如上所示。

我怎样才能做到这一点？我也试过Object.keys(this.state.data).map()，但没有运气。

提前致谢。

Answer 1

您的data变量是一个 JSON 对象，而不是一个数组。要将其转换为数组并获取键和值，您可以使用Object.entries.

此函数将返回一个包含其他数组的数组，其中键为您的第一个值，值为第二个：

{Object.entries(this.state.data).map(([key, value]) => (
    <tr key={key}>
        <td>{key}</td>
        <td>{value.key_val1}</td>
        <td>{value.key_val2}</td>
        <td>{value.key_val3}</td>
        <td>{value.key_val4}</td>
    </tr>
))}

如果您不需要对象的键，则可以使用Object.values.

使用解构的替代方法：

{Object.entries(this.state.data).map(([key, { key_val1, key_val2, key_val3, key_val4 }]) => (
    <tr key={key}>
        <td>{key}</td>
        <td>{key_val1}</td>
        <td>{key_val2}</td>
        <td>{key_val3}</td>
        <td>{key_val4}</td>
    </tr>
))}

另一个使用嵌套映射的版本，适用于任何类型的对象：

{Object.entries(this.state.data).map(([key, value]) => (
    <tr key={key}>
        <td>{key}</td>
        {Object.entries(value).map(([name, data]) => <td key={name} >{data}</td>)}
    </tr>
))}