在 React 中渲染字符串數組

Question

我正在嘗試通過以下方式在 React 應用程序中呈現一個平面字符串數組：

{array.length > 0 ? (
  <div>
    <h5>Email list</h5>
    <div
      style={{
      paddingLeft: "50px",
      float: "left",
      lineHeight: "normal",
      height: "50px",
      width: "300px"
      }}
    >
    {array.map((date, index) => {
    <p key={index}>{date}</p>;
    })}
    </div>
  </div>
) : (<></>)}

我很難理解為什么我的 map function 不會在屏幕上呈現任何內容。 我能夠很好地控制台記錄日期和索引，日期肯定存在於數組中，並且 h5 標題按應有的方式呈現。 但是，它下面的 div 中沒有顯示任何內容。

如果我刪除 map 功能並僅打印一行文本，則會呈現。 但是，一旦我將 map 添加回來，它就會返回到一個空的 div。 也沒有控制台日志表明有任何問題。

任何幫助表示贊賞！

Answer 1

如果要添加{}括號，則 map function 需要返回語句。 前任：

{array.map((date, index) => {
  return <p key={index}>{date}</p>;
})}

Answer 2

我認為你沒有在 map 方法中返回 JSX。下面的代碼將呈現數組元素列表

   {array.map((date, index) => {
   return <p key={index}>{date}</p>;
   })}

Answer 3

我在這里有一個解決方案，您只需在代碼中稍作更改，您可以在 map function 之后添加 return 語句，我希望它對您有用。

{array.map((date, index) => {
return (
      <p key={index}>{date}</p>;
      )
   })}

Answer 4

您可以使用這段稍作改動的代碼。

https://codesandbox.io/s/currying-dust-uxu5jr?file=/src/App.js

{ array.map((date, index) => <p key={index}>{date}</p> ) }