ReactJS：通过在 lodash 中使用 groupby 进行映射

Question

我有以下内容，它将以特定方式显示项目。

import './App.css'
import _ from 'lodash'

const App = () => {
  const dataone = [
    { id: 1, month: 'jan', level: 8, clazz_id: '1A' },
    { id: 2, month: 'feb', level: 6, clazz_id: '1A' },
    { id: 3, month: 'jan', level: 2, clazz_id: '2B' },
    { id: 4, month: 'feb', level: 3, clazz_id: '2B' },
    { id: 5, month: 'mar', level: 5, clazz_id: '2B' },
  ]

  const data = _.groupBy(dataone, 'clazz_id')
  const entries = Object.entries(data)

  return (
    <div className='App'>
      {entries.map((item, index) => (
        <div>
          <h2>{item[0]}</h2>
          <h2>
            {item[1].map((e) => (
              <p>
                {e.month}
                {'--'}
                {e.level}
              </p>
            ))}
          </h2>
        </div>
      ))}
    </div>
  )
}

export default App

以上代码将显示如下对象数组：

1A
jan-8
feb-6

2B
jan-2
feb-3
mar-5

这就是我想要的，但是上面的代码是用 lodash 和 object.entries 完成的，所以我正在寻找一个更好更清晰的解决方案。

Answer 1

这仅使用 Javascript 内置函数 (Array.reduce, Array.map, and Object.entries) 即可实现。最好避免使用 lodash，因为它会增加您的 Web 应用程序的捆绑包大小，并使应用程序在加载时变慢。

我会像下面那样做。

const App = () => {
  const dataone = [
    { id: 1, month: "jan", level: 8, clazz_id: "1A" },
    { id: 2, month: "feb", level: 6, clazz_id: "1A" },
    { id: 3, month: "jan", level: 2, clazz_id: "2B" },
    { id: 4, month: "feb", level: 3, clazz_id: "2B" },
    { id: 5, month: "mar", level: 5, clazz_id: "2B" }
  ];

  return (
    <div className="App">
      {Object.entries(
        dataone.reduce((prev, curr) => {
          prev[curr.clazz_id]
            ? prev[curr.clazz_id].push(curr)
            : (prev[curr.clazz_id] = [curr]);
          return prev;
        }, {})
      ).map(([key, value]) => {
        return (
          <div>
            <h2>{key}</h2>
            <h2>
              {value.map(({ level, month }) => (
                <p>
                  {month}
                  {"--"}
                  {level}
                </p>
              ))}
            </h2>
          </div>
        );
      })}
    </div>
  );
};

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

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

Answer 2

您可以使用reduce按所需格式对数据进行分组

export default function App() {
  const dataone = [
    { id: 1, month: 'jan', level: 8, clazz_id: '1A' },
    { id: 2, month: 'feb', level: 6, clazz_id: '1A' },
    { id: 3, month: 'jan', level: 2, clazz_id: '2B' },
    { id: 4, month: 'feb', level: 3, clazz_id: '2B' },
    { id: 5, month: 'mar', level: 5, clazz_id: '2B' },
  ];
  function groupByClass(arr) {
    return arr.reduce((acc, curr) => {
      if (!acc[curr.clazz_id]) {
        acc[curr.clazz_id] = {
          classId: curr.clazz_id,
          level: [`${curr.month}-${curr.level}`],
        };
      } else {
        acc[curr.clazz_id].level.push(`${curr.month}-${curr.level}`);
      }
      return acc;
    }, {});
  }

  const groupedData = groupByClass(dataone);
  console.log(groupedData);
  return (
    <div className="App">
      {Object.keys(groupedData).map((item) => {
        return (
          <div>
            <div>{groupedData[item].classId}</div>
            {groupedData[item].level.map((elem) => {
              return <p>{elem}</p>;
            })}
          </div>
        );
      })}
    </div>
  );
}

Demo here

Answer 3

Lodash 也有一个 .map 方法可以遍历对象。因此，您可以使用它来保持一致性。

const App = () => {
  const dataone = [
    { id: 1, month: 'jan', level: 8, clazz_id: '1A' },
    { id: 2, month: 'feb', level: 6, clazz_id: '1A' },
    { id: 3, month: 'jan', level: 2, clazz_id: '2B' },
    { id: 4, month: 'feb', level: 3, clazz_id: '2B' },
    { id: 5, month: 'mar', level: 5, clazz_id: '2B' },
  ]

  const data = _.groupBy(dataone, 'clazz_id')

  return (
    <div className='App'>
      {_.map(data,(value, key) => (
        <div>
          <h2>{key}</h2>
          <h2>
            {value.map((e) => (
              <p>
                {e.month}
                {'--'}
                {e.level}
              </p>
            ))}
          </h2>
        </div>
      ))}
    </div>
  )
}


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="root"></div>

ReactJS：通过在 lodash 中使用 groupby 进行映射

ReactJS: Map through using groupby in lodash

javascript

dictionary

lodash

reactjs