嘗試使用圖表中的數據顯示表格

Question

我正在嘗試根據所選內容（選擇哪個欄）呈現具有兩列的表格。 每個條是一個日期數組。

因此，如果單擊最后一個欄，我想要一個月份表，其中包含該月在該數組中出現的次數。

例如，在最后一個欄中，這是在第 62 行中由 function 創建的控制台中顯示的數組：

0: {date: 5, count: 1}
1: {date: 7, count: 15}
2: {date: 7, count: 15}
3: {date: 7, count: 15}
4: {date: 7, count: 15}
5: {date: 7, count: 15}     

ETC..

Function：

 const table = (data, e ) =>{ // get array of dates when bar is clicked let newArr= data.datum.dimensions[0].datum.data.results.map((d) => d.Date) console.log(newArr) // convert into Date object const datesArr = newArr.map(d => ({ date: new Date(d), count: 0})) console.log(datesArr) // add month array with month as an integer and the the count of months (how many times each month shows up ) const monthArr = datesArr.map((e) => ({date: e.date.getMonth(), count: 0})) monthArr.forEach((e) => e.count = datesArr.filter((d) => d.date.getMonth() === e.date).length) console.log(monthArr) setMonths(monthArr) }

我正在使用 state 並且我只是想使用帶有這個數組和計數的 JSX 呈現一個表

所以我想要一張表，其中一列中包含月份，另一列中包含計數 - 如下所示：

 <tr> <th>Year <select name="format" id="format" onChange={(e) => { table() }} > <option value='months'>months</option> </select> </th> <th> count </th> </tr> </thead> <tbody> <tr> <td>{months}</td> <td> // count goes here </td> </tr> </tbody> </Table> */}

這是完整沙盒的鏈接： https://codesandbox.io/s/nice-meitner-o70m1

Answer 1

您的邏輯在table()中有點令人困惑，我剛剛重寫了它必須易於理解。

除此之外，您只需要一個 map 在您的months state 中，如下所示：

    <Table striped bordered hover size="sm">
      <thead>
        <tr>
          <th>
            Month
            <select name="format" id="format" onChange={console.log}>
              <option value="months">months</option>
              <option value="year">year</option>
            </select>
          </th>
          <th>count</th>
        </tr>
      </thead>
      <tbody>
        {months.map(({ date, count }, index) => (
          <tr key={index}>
            <td>{date}</td>
            <td>{count}</td>
          </tr>
        ))}
      </tbody>
    </Table>

看看我的更改，看看它是否更干凈，否則你必須在monthArr之前過濾你的 monthArr，因為它有重復的值。

https://codesandbox.io/s/summer-lake-g0wki?file=/src/chart.js