反應：無法在功能組件中獲取 output

Question

我有一個Array of objects我試圖使用reduce function 來根據 object 的鍵進行過濾。 這是整個項目的代碼： CODE

如果您檢查Exercises文件夾中的index.js文件：

{exercices_.map(([category, array]) => {
          <Typography>{category}</Typography>;
})}

exercices_是一個嵌套數組，在每個數組中我都有類別和另一個數組。 現在我只是想 output 類別，但它不工作。 當我使用控制台時，相同的代碼在App.js文件中有效。 但是當我將數組傳遞給子組件時它不再起作用了。 您可以通過網站自由更改代碼，但請注意，您是唯一看到這些更改的人。

預期的 output 只是一個字符串 Like Shoulders 。 確保檢查網頁的控制台，因為那里有所有 output。

Answer 1

問題是您不會在每次迭代時都返回此組件，因此它會循環遍歷它，但 output 數組是空的。

一種解決方法：

{exercices_.map(([category, array]) => {
          return <Typography>{category}</Typography>;
})}

看看如何。map function 在這里工作https://www.w3schools.com/jsref/jsref_map.asp

Answer 2

忘記返回了，在使用 React 元素數組時還需要添加一個鍵

{exercices_.map(([category, array], index) => {
          return <Typography key={index}>{category}</Typography>;
})}