ReactJS：通過在lodash中使用groupby進行映射

我有以下內容，它將以某種方式顯示專案。

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 完成的，所以我正在尋找一個更好、更清晰的解決方案。

uj5u.com熱心網友回復：

這可以僅使用 Javascript 內置函式（Array.reduce、Array.map和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>

uj5u.com熱心網友回復：

您可以使用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>
  );
}

演示在這里

uj5u.com熱心網友回復：

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>

標籤：javascript 反应 字典 罗达什

上一篇：將更大長度的鍵/值物件陣列映射到其他陣列

下一篇：從元組串列構建字典串列