在 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> ) }