React JS 在状态数组中映射数组答案

【问题标题】：React JS mapping an array inside a state arrayReact JS 在状态数组中映射数组
【发布时间】：2021-07-17 10:37:02
【问题描述】：

所以基本上我有这个问题。我对 React JS 比较陌生。我已经创建了一个状态并且我已经成功地映射了它，除了一件事。下面是状态：

const [currProject, setCurrProject] = useState([{
            id: 4,
            title: "Title",
            desc: "Description",
            arr: ["these", "are", "array", "elements"]}]);

那么，就像我说的，我这样映射：

currProject.map(item =>(
     <div>
          <h1>{item.title}</h1>
          <p>{item.desc}</p>
          <div>
               <p>{item.arr}</p>
          </div>
     </div>
        ))

所以基本上p标签在哪里，我想将currProject状态的数组中的元素放在单独的p标签中。所以它看起来像这样：

<p>these</p>
<p>are</p>
<p>array</p>
<p>elements</p>

但显然我不想硬编码。因为该数组中可能有更多或更少的元素。基本上我要问的是如何映射一个已经在状态数组中的数组？

【问题讨论】：

标签： javascript arrays reactjs components mapping

【解决方案1】：

您可以像映射前一个数组一样映射它。

    currProject.map((item, i) =>(
         <div key={i}>
              <h1>{item.title}</h1>
              <p>{item.desc}</p>
              <div>
                   {item.arr.map((item, i) => (
                    <p key={i}>{item}</p>
                   ))}
              </div>
         </div>
        ))

【讨论】：

【解决方案2】：

你需要使用更多map来渲染item.arr。

  {currProject.map((item) => (
    <div key={item.id}>
      <h1>{item.title}</h1>
      <p>{item.desc}</p>
      <div>
        {item.arr.map((item2, index) => (
          <p key={index}>{item2}</p>
        ))}
      </div>
    </div>
  ))}

注意：你需要在map内的第一个标签中添加一个key

【讨论】：