React JS 在 state 數組中映射數組

Question

所以基本上我有這個問題。 我對 React JS 比較陌生。 我已經創建了一個 state 並且我已經成功地映射了它，除了一件事。 下面是 state：

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

那么，就像我說的，我的 map 是這樣的：

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

所以基本上p標簽在哪里，我想將currProject state中數組中的元素放在單獨的p標簽中。 所以它看起來像這樣：

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

但顯然我不想硬編碼。 因為該數組中可能有更多或更少的元素。 基本上我要問的是我如何 map 一個已經在 state 陣列中的陣列？

Answer 1

您可以 map 它就像您映射前一個數組一樣。

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

Answer 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