我现在已经努力尝试将数据放入表格中一段时间​​了。

我尝试了不同的方法，以最简单的方式从后端获取数据。 最新的尝试在 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 中的代码，只是尝试做一个简单的表格来输出数据。 （之后我可以为其设置样式 ;)) 我试图在 .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 函数中做到这一点时，我做错了什么？

当所有数据都在表中时，我希望它看起来像这样：

更新 ：

tableData 来自 index.js 中的这个（与上面相同）：

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

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

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

并且该服务进入后端并发回此：

更新 2 我回答了我自己的问题。请参阅下面的答案。希望它能在未来帮助到某人 :)