盡管在 console.log 中顯示，但 React Array 未在 .map 中顯示數據

Question

我正在從 GraphQL 查詢中提取數據並通過我的 React 應用程序中的數組進行映射，我可以查看是否我控制台記錄了所有數據都按要求存在的數組但是當我通過它 map 時，我什么也沒有顯示我的屏幕，沒有錯誤，它不會生成任何 HTML 元素或任何東西，盡管它與我到目前為止所做的所有其他數組 map 相似。

我的組件的映射部分如下：

const CareerFeed = React.forwardRef((props, ref) => {

return (
    <CareerFeedWrapper ref={ref}>
      <Container width={14}>
      {console.log(props.array)}
        {props.array.map((item, index) => {
          <CareerItem key={index}>
            {item.title}
          </CareerItem>
        })}
      </Container>
    </CareerFeedWrapper>
  )
})

Answer 1

您不會從.map function 返回任何內容：當您使用大括號時，箭頭 function 不再隱式返回。 您將需要使用return語句：

{props.array.map((item, index) => {
    return (
        <CareerItem key={index}>
            {item.title}
        </CareerItem>
    );
})}

或者，放棄大括號並將返回的 JSX 括在括號中以利用顯式返回：

{props.array.map((item, index) => (
    <CareerItem key={index}>
        {item.title}
    </CareerItem>
))}

Answer 2

看起來像 map 上缺少返回語句。這意味着它實際上遍歷數組並將每個替換為 null object。試試這個：

return (
    <CareerFeedWrapper ref={ref}>
      <Container width={14}>
      {console.log(props.array)}
        {props.array.map((item, index) => {
          return (<CareerItem key={index}> //added return
            {item.title}
          </CareerItem>) //added closing parentheses for return
        })}
      </Container>
    </CareerFeedWrapper>
  )
})