如何在 React 中映射 inside map 以将其放入 table？

Question

我正在努力将我的数据放入 table。

我尝试了不同的方法来以最简单的方式从后端获取数据。最近的尝试在 console.log(tableData):

中给出了这个

(3) [{…}, {…}, {…}]
  0: period: "23"
     periodId: 1
     periodQuantity: Array(3)
       0: {period: "23", quantity: 1037, name: "Stolpar Tall"}
       1: {period: "23", quantity: 1077, name: "Stamblock Tall"}
       2: {period: "23", quantity: 590, name: "Grovtimmer Tall"}
       length: 3
       [[Prototype]]: Array(0)
     sortOrder: 0
     [[Prototype]]: Object
  1: {periodId: 2, period: "24", sortOrder: 0, periodQuantity: Array(3)}
  2: {periodId: 3, period: "25", sortOrder: 0, periodQuantity: Array(3)}
  length: 3
  [[Prototype]]: Array(0)

这是我在 React 中的代码，只是想做一个简单的 table 来输出数据。（之后我可以设计它；））我试图在 .map 中做一个 .map 但我只得到错误：

TypeError: Cannot read property 'periodQuantity' of undefined

<div>
   <table>
      <thead>
        <tr>
          <th>Sortiment</th>
          {tableData.map(x => {
            return (
              <React.Fragment key={x.periodId}>
                <th key={x.periodId}>Week {x.period}</th>
              </React.Fragment>
            )
          })}
         </tr>
       </thead>
       <tbody>
         <tr>
           <th >Sort.Name </th>
           {tableData.map(({ periodQuantity }, i) => {
             {
              this.periodQuantity.map((p) => {
                return(
                   console.log(p),
                   <React.Fragment key={i}>
                      <td key={p.name}>P {p.name}.</td>
                   </React.Fragment>
                )
               })
              }
            })}
          </tr>
        </tbody>
      </table>
    </div>

如果我只是删除一些代码，那么只有第一个 .map 存在并将 periodQuantity 放在 console.log(periodQuantity) 中它会给我这个：

(3) [{…}, {…}, {…}]
  0: 
    name: "Sortiment name 1"
    period: "30"
    quantity: 55 
    [[Prototype]]: Object
  1: {period: "30", quantity: 32, name: "Sortiment name 2"}
  2: {period: "30", quantity: 64, name: "Sortiment name 2"}
  ...
  length: 3[[Prototype]]: Array(0)
(3) [{…}, {…}, {…}]
(3) [{…}, {…}, {…}]
and so on...

所以它实际上知道 periodQuantity 是什么，但是当我无法在第二个 .map 函数中实现它时，我做错了什么？

这是我希望所有数据都在 table:

时的样子

更新:

tableindex.js中的数据来源于此（同上）：

const [tableData, setTableData] = useState([{}]);

 followUpService.GetSortiment(periodDateTime).subscribe(
        (response) => handlePeriod(response),
        (error) => handleHttpRequestError(error.message));

  const handlePeriod = (response: any) => {
    setTableData(response);
  };

然后该服务进入后端并发回：

更新 2 我回答了我自己的问题。请在下面回答。希望它能对以后的人有所帮助:)

Answer 1

删除这个

this.periodQuantity.map((p) => {

就这样吧

periodQuantity.map((p) => {

还有第一个地图return

{tableData.map(({ periodQuantity }, i) => {
              return periodQuantity.map((p) => {
                return(
                   <React.Fragment key={p.name}>
                      <td>P {p.name}.</td>
                   </React.Fragment>
                )
               })
            })}

还更改了密钥，或者它可能会重复，假定名称是唯一的，并从 td

中删除了密钥

这里是一个沙盒https://codesandbox.io/s/weathered-platform-kftsv

Answer 2

我终于发现我需要在我的第二张地图之前放置一个 if (periodQuantity != null)，因为我认为它在有任何数据之前就被读取了。

这是我的最终解决方案，它可能会对将来的人有所帮助:) 我还必须将 name 放在 periodQuantity 列表之外，并且在该列表中只有 period 和 quantity。但是我在 map 中出现问题的主要原因（我认为）是在第二个 .map.

周围缺少 if (periodQuantity != null)

<div>
  <table>
     <thead>
        <tr>
          {tableData.slice(0,1).map(({ periodQuantity }) => {
            if (periodQuantity != null) {
              return( 
                <tr> 
                  <th>Sortiment</th>
                  {periodQuantity.map(({ period }) => {
                    return (
                      <React.Fragment >
                         <th key={period}>V.{period}</th>
                      </React.Fragment>
                   )})}
                </tr>
             )}})}
          </tr>
       </thead>
       <tbody>
         <tr>
            {tableData.map(({ periodQuantity, name }) => {
              if (periodQuantity != null) {
                return( 
                  <tr> 
                     <th key={name}>{name}</th>
                     {periodQuantity.map(({ period, quantity }) => {
                        return (
                           <React.Fragment >
                              <td key={period}>{quantity}</td>
                           </React.Fragment>
                      )})}
                   </tr>
               )}})}
           </tr>
         </tbody>
      </table>
   </div>

如何在 React 中映射 inside map 以将其放入 table？

How to map inside map in React to put it into a table?

reactjs

html-table

array.prototype.map