如何使用React将一组数据正确映射到表上

Question

我正在尝试使用react将数据映射到正确的列，并且努力使所有内容都显示在正确的列中。

这是我的数据结构，它由一个数据数组组成-在这个原始数组中，每个对象都有一个norm_data和feature_data键-再次由一个具有相同键的数据数组组成。

[
  {
    "norm_data": [
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "step_id": 98,
    "cell_id": 38,
    "feature_data": [
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "stim_id": 345
  },
  {
    "norm_data": [
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "step_id": 97,
    "cell_id": 37,
    "feature_data": [
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "stim_id": 344
  }
]

这是我到目前为止所能找到的最接近的位置，可以在Feature_data数组中循环获取表的标签。

在该循环中，我需要以某种方式循环遍历规范data_和feature_data到接下来的两个td中-我已标记了我需要数据去的地方。

class Feature extends Component {


  render() {
    const { loading } = this.props;

    if (loading) {
      return <div>Loading...</div>;
    }

    const featureData = this.props.data[0].feature_data;

    return (
      <table>
        <tbody><tr>
          <td></td>
          <td colSpan="2">Title</td>
        </tr>
        <tr>
          <td></td>
          <td><h2>actual</h2></td>
          <td><h2>norm</h2></td>
        </tr>
        {featureData.map((data, key) => {
          return (
            <tr key={key}>
              <td>
                {data.feature}
              </td>
              <td>I need this to be the feature_data Value</td>
              <td>I need this to be the norm_data Value</td>
            </tr>
          );
        })}

        </tbody></table>
    );
  }
}

这是我想要它看起来的原始标记

https://jsfiddle.net/eL0p5zuk/7/

Answer 1

当您已经将索引传递到map函数中时，您的方法就已经存在。只需使用.map()遍历实际数据，然后在feature_data映射内访问norm_data和featureData。

不过，根据我对您问题的理解，我只能走这么远了。

let data = [
  {
    "norm_data": [
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "step_id": 98,
    "cell_id": 38,
    "feature_data": [
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "stim_id": 345
  },
  {
    "norm_data": [
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {
        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "step_id": 97,
    "cell_id": 37,
    "feature_data": [
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Headline",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Small Print",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Call to Action",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Logo",
        "exists": false
      },
      {

        "avg": 0,
        "panelist": 0,
        "feature": "Subheadline",
        "exists": false
      }
    ],
    "stim_id": 344
  }
];

class App extends React.Component {
  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>
              <td></td>
              <td colSpan="2"><h1>Title</h1></td>
            </tr>
            <tr>
              <td></td>
              <td><h2>Actual</h2></td>
              <td><h2>Norm</h2></td>
              <td><h2>Actual</h2></td>
              <td><h2>Norm</h2></td>
            </tr>
            {
              data[0].feature_data.map((ft, i) => {
                return (
                  <tr>
                    <td>{ft.feature}</td>
                    <td>AVG: {data[0].feature_data.filter(dt => dt.feature === ft.feature)[0].avg}</td>
                    <td>AVG: {data[0].norm_data.filter(dt => dt.feature === ft.feature)[0].avg}</td>
                    <td>AVG: {data[1].feature_data.filter(dt => dt.feature === ft.feature)[0].avg}</td>
                    <td>AVG: {data[1].norm_data.filter(dt => dt.feature === ft.feature)[0].avg}</td>
                  </tr>
                );
              })
            }
            {/*
              data.map((item, i) => {
                return item.feature_data.map((v, j) => {
                    return ( 
                      <tr>
                        <td>{v.feature} {i+1}</td>
                        <td>Data: {JSON.stringify(v)}</td>
                        <td>Data: {JSON.stringify(item.norm_data[j])}</td>
                      </tr> 
                    );
                })
              })
            */}
          </tbody>
        </table>
      </div>
    );
  }
}

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

table, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

由于您没有指定要比较的内容或实际计划格式化数据的方式，因此需要从此处自行构造/格式化数据输出。

Answer 2

我在这里假设feature_data是“实际”数据（您应该澄清一下）。

我认为您的问题是仅当您同时需要feature_data和featureData.map的数据时，才在feature_data（norm_data）上进行迭代。

首先，声明第二个数据数组以使其更清晰： const normData = this.props.data[0].norm_data;

第二，将变量key重命名为index以消除任何歧义：map操作的第二个参数是迭代项的索引。

如果您希望将此索引分配给可以使用的键，但请读者记住，这就是我们正在讨论的索引。

然后使用该索引访问norm_data中的相应数据。

因此，假设您要显示的数据是平均值：

{featureData.map((data, index) => {
    const featureValue = featureData[index].avg;
    const normValue = normData[index].avg;
    return (
        <tr key={index}>
            <td>
                {data.feature}
            </td>
            <td>{featureValue}</td>
            <td>{normValue}</td>
        </tr>
    );
})}