在 React 嵌套数组中迭代值答案

【问题标题】：Iterate Values in React Nested Array在 React 嵌套数组中迭代值
【发布时间】：2020-12-29 12:10:23
【问题描述】：

我在我的 react 应用程序中迭代嵌套数组的值时遇到问题。

我希望输出是这样的”

Shopping
    Food
    Drink
    
Sports
   Basketball
   Soccer

请在此处查看我的代码框CLICK HERE

{results.map((data, index) => (
        <ul>
          <li>
            <div>{data["key"]} </div>
          </li>
        </ul>
      ))}

【问题讨论】：

你能解释清楚点吗。我看过你的代码，但仍然令人困惑。 Results 是一个对象数组。当您映射结果数组时，您将在data 变量中获得对象。但是在您的数据对象中没有名称为key 的键。

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

您需要像这样修复salary.jsx。要获得正确的密钥，您必须使用Object.keys(data)[1] 而不是data["key"]。

import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Shopping: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Sports: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];
  
  const format = (data) => {
    const key = Object.keys(data)[1];
    const text = data[key].reduce((prev, cur) => {
      return prev + ' ' + cur.Name;
    }, '')
    return key + text;
  }
  return (
    <div>
      {results.map((data) => (
        <ul>
          <li>
            <div> {format(data)} </div>
          </li>
        </ul>
      ))}
    </div>
  );
};

export default Salary;

【讨论】：

【解决方案2】：

你在寻找这样的东西吗？

import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Shopping: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Sports: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
    <div>
      <ul>
        {results.map((data, i) =>
          Object.keys(data)
            .filter((x) => Array.isArray(data[x]))
            .map((key) => (
              <div key={data.ID}>
                <li>{key}</li>
                <ul>
                  {data[key].map((item) => (
                    <li key={item.ID}>{item.Name}</li>
                  ))}
                </ul>
              </div>
            ))
        )}
      </ul>
    </div>
  );
};

export default Salary;

【讨论】：

【解决方案3】：

我认为您在迭代 results 时遇到问题的原因是它的状态不佳：如果可以的话，试试这个：

import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Name: "Shopping",
      subs: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Name: "Sports",
      subs: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
    <div>
      {results.map((data, index) => (
        <ul key={data.ID}>
          <li>
            <div>{data.Name}</div>
            {data.subs.length &&
              data.subs.map((innerData) => (
                <ul key={innerData.ID}>
                  <li>
                    <div>{innerData.Name}</div>
                  </li>
                </ul>
              ))}
          </li>
        </ul>
      ))}
    </div>
  );
};

export default Salary;

【讨论】：

【解决方案4】：

检查这个sn-p。使用嵌套的map 并为所有li 提供key 属性

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Shopping: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Sports: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
  <div>
    <ul>
      {results.map((data) => (
        <li key={data.id}>
          {data.ID}
          <ul>
            {(data.Sports || data.Shopping).map((item) => (
              <li key={item.ID}> {item.Name} </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  </div>
  );
};

ReactDOM.render(<Salary />, document.querySelector('#app'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="app"> </div>

【讨论】：