無法在 React 中映射數組

Question

我通過 prop 將數組（數據）傳遞給 Segment 組件。 但是我無法映射數據。 我確定這是一個非常明顯的錯誤，但我只是沒有看到:(

import React from 'react';
import SegmentLine from './SegmentLine';

const Segment = ({ data }) => {
  console.log(data);

  return data && data.map((line, i) => <SegmentLine key={i} data={line} />);
};

export default Segment;

console.log 是這樣的：

任何幫助是極大的贊賞！ 提前致謝 ：）

Answer 1

首先，我認為您在導出之前有額外的花括號。

其次，您應該刪除data.map之間的花括號。

return (
  data &&
  data.map((line, i) => {
    return <SegmentLine key={i} data={line} />
  })
)

Answer 2

你可以添加一點改進做

return (
  data &&
  data.map((line, i) => (
    <SegmentLine key={i} data={line} />
  ));