如何使用 React 地图功能 [重复]

Question

我想让内容和 userId 在 cmets 的 UI 中可见。但它没有反应。

这是一个产品信息数组。

控制台日志

Object
Brand: "5"
Carts: []
Cody: "3"
Comments: Array(27)
0: {id: 28, content: "ㅂㅈㄱ", createdAt: "2021-05-21T01:27:39.000Z", updatedAt: "2021-05-21T01:27:39.000Z", UserId: 1, …}
1: {id: 27, content: "12412", createdAt: "2021-05-21T01:25:29.000Z", updatedAt: "2021-05-21T01:25:29.000Z", UserId: 1, …}
2: {id: 26, content: "124", createdAt: "2021-05-21T01:25:28.000Z", updatedAt: "2021-05-21T01:25:28.000Z", UserId: 1, …}
3: {id: 25, content: "79", createdAt: "2021-05-21T01:25:24.000Z", updatedAt: "2021-05-21T01:25:24.000Z", UserId: 1, …}
4: {id: 24, content: "qwr", createdAt: "2021-05-21T01:23:33.000Z", updatedAt: "2021-05-21T01:23:33.000Z", UserId: 1, …}
5: {id: 23, content: "214", createdAt: "2021-05-21T01:21:25.000Z", updatedAt: "2021-05-21T01:21:25.000Z", UserId: 1, …}
6: {id: 22, content: "21", createdAt: "2021-05-21T01:21:20.000Z", updatedAt: "2021-05-21T01:21:20.000Z", UserId: 1, …}
7: {id: 21, content: "ㅂㅈㄱ", createdAt: "2021-05-21T01:20:43.000Z", updatedAt: "2021-05-21T01:20:43.000Z", UserId: 1, …}
8: {id: 20, content: "24", createdAt: "2021-05-21T01:17:44.000Z", updatedAt: "2021-05-21T01:17:44.000Z", UserId: 1, …}
9: {id: 19, content: "123", createdAt: "2021-05-21T01:17:06.000Z", updatedAt: "2021-05-21T01:17:06.000Z", UserId: 1, …}
10: {id: 18, content: "333", createdAt: "2021-05-21T00:51:18.000Z", updatedAt: "2021-05-21T00:51:18.000Z", UserId: 1, …}
11: {id: 17, content: "qwr", createdAt: "2021-05-20T23:16:34.000Z", updatedAt: "2021-05-20T23:16:34.000Z", UserId: 1, …}
12: {id: 16, content: "152", createdAt: "2021-05-20T23:16:26.000Z", updatedAt: "2021-05-20T23:16:26.000Z", UserId: 1, …}
13: {id: 15, content: "w", createdAt: "2021-05-20T23:14:39.000Z", updatedAt: "2021-05-20T23:14:39.000Z", UserId: 1, …}
14: {id: 14, content: "qwr", createdAt: "2021-05-20T23:12:35.000Z", updatedAt: "2021-05-20T23:12:35.000Z", UserId: 1, …}
15: {id: 13, content: "12", createdAt: "2021-05-20T23:12:23.000Z", updatedAt: "2021-05-20T23:12:23.000Z", UserId: 1, …}
16: {id: 12, content: "123", createdAt: "2021-05-20T23:11:17.000Z", updatedAt: "2021-05-20T23:11:17.000Z", UserId: 1, …}
17: {id: 11, content: "as", createdAt: "2021-05-20T23:10:28.000Z", updatedAt: "2021-05-20T23:10:28.000Z", UserId: 1, …}
18: {id: 10, content: "아싸", createdAt: "2021-05-20T23:06:44.000Z", updatedAt: "2021-05-20T23:06:44.000Z", UserId: 1, …}
19: {id: 9, content: "a", createdAt: "2021-05-20T22:06:34.000Z", updatedAt: "2021-05-20T22:06:34.000Z", UserId: 1, …}
20: {id: 8, content: "ㄱㅈㄱ", createdAt: "2021-05-20T21:58:32.000Z", updatedAt: "2021-05-20T21:58:32.000Z", UserId: 1, …}
21: {id: 7, content: "야호", createdAt: "2021-05-20T21:57:34.000Z", updatedAt: "2021-05-20T21:57:34.000Z", UserId: 1, …}
22: {id: 6, content: "ㅁㄴㅇ", createdAt: "2021-05-20T21:53:26.000Z", updatedAt: "2021-05-20T21:53:26.000Z", UserId: 1, …}
23: {id: 5, content: "야호", createdAt: "2021-05-20T21:53:16.000Z", updatedAt: "2021-05-20T21:53:16.000Z", UserId: 1, …}
24: {id: 4, content: "야호", createdAt: "2021-05-20T21:51:39.000Z", updatedAt: "2021-05-20T21:51:39.000Z", UserId: 1, …}
25: {id: 3, content: "야호", createdAt: "2021-05-20T21:51:06.000Z", updatedAt: "2021-05-20T21:51:06.000Z", UserId: 1, …}
26: {id: 2, content: "바보", createdAt: "2021-05-20T05:24:21.000Z", updatedAt: "2021-05-20T05:24:21.000Z", UserId: 1, …}
length: 27

这样输入代码后，我尝试打印内容，但没有响应。我不知道如何修复该代码。

 <ul>
    {productinfo.Comments.map((content, id) =>  // currentIndex, index -> 
      <li key={id} productinfo={content} />
    )} 
  </ul>

Answer 1

<li> 只是一个标准的 HTML 标签。问题不在于map() 函数，而在于您使用<li> 错误。

<ul>
  {productinfo.Comments.map((content, id) => (
    <li key={id}>
      {content}
    </li>
  ))}
</ul>

如果content 不是字符串，那么你必须创建一个自定义组件来处理它。