我在key={item.id}通過reposit串列映射時在我的代碼中定義了 Key并且我試圖將它用作我這里的道具，{openModal && <Modal repo={reposit} my_key={key} setOpenModal={setOpenModal}/> }但它似乎不起作用。有人可以向我解釋如何通過將它用作道具來訪問我的 Modal 上的密鑰？
這是代碼的一部分：
<List.Item>
<List.Content>
{reposit.map((item) => (
<li key={item.id} onClick={() => {setOpenModal(true)}}>
<i className="folder icon" /> {item.name}
</li>
))}
{openModal && <Modal repo={reposit} my_key={key} setOpenModal={setOpenModal}/> }
</List.Content>
</List.Item>
感謝您的幫助。
uj5u.com熱心網友回復：
您必須使用 state 來跟蹤單擊串列項的鍵，如下所示：
import React, { useState } from "react";
const App = () => {
const [myKey, setMyKey] = useState();
return (
<List.Item>
<List.Content>
{reposit.map((item) => (
<li
key={item.id}
onClick={() => {
setMyKey(item.id);
setOpenModal(true);
}}
>
<i className="folder icon" /> {item.name}
</li>
))}
{openModal && (
<Modal repo={reposit} myKey={myKey} setOpenModal={setOpenModal} />
)}
</List.Content>
</List.Item>
);
};
uj5u.com熱心網友回復：
li 鍵屬性僅在 li 元素內定義，在元素之外無法訪問。您的模態不是 li 元素的子元素，因此無法以您嘗試的方式訪問它。您必須通過 li onClick 函式將 item.id 傳遞給模態。一種方法是創建狀態以跟蹤應該傳遞給模態的鍵，并在 onclick 函式中更改它。
const [modalKey, setModalKey] = useState()
const openModal = (key) => {
setModalKey(key)
setOpenModal(true)
}
...
<List.Item>
<List.Content>
{reposit.map((item) => (
<li key={item.id} onClick={() => openModal(item.id)}>
<i className="folder icon" /> {item.name}
</li>
))}
{openModal && <Modal repo={reposit} my_key={modalKey} setOpenModal={setOpenModal}/> }
</List.Content>
</List.Item>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/322054.html
標籤：反应
上一篇：psql輸出csv檔案格式