大佬教程收集整理的这篇文章主要介绍了如何传递我在反应功能组件中获取和映射的数据以反应模态？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试使用 fetch PUT 更新特定对象。 在主要组件中，我首先映射通过 fetch GET 获得的数据并显示数据。 然后，onClick，我打开一个模态，我想将发生单击的单个对象传递给该模态。 模态仅从地图中获取最后一个元素的数据。
datas.books.map((data,indeX) => {
return (
<Carddiv key={v4()} ID={data.ID}>
<h3>{data.titlE}</h3>
<h4>by {data.Author}</h4>
<p>Read: {data.Read && `\u2713`}</p>
<updateModal
openState={openStatE}
setopenState={setopenStatE}
bookID={data.ID}
setRender={setRender}
render={render}
title={data.titlE}
author={data.Author}
read={data.ReaD}></updateModal>
<button onClick={() => setopenState(!openStatE)}>Edit</button>
<button
onClick={() => {
setdeleteUrl(`http://localhost:9000/book/del/${data.ID}`);
}}>
delete
</button>
</Carddiv>
);
})
我错过了什么？
看起来您将拥有与项目一样多的 @H_523_5@modal 组件。您可能想要使用稍微不同的架构，并在循环外仅渲染一次 @H_523_5@modal。
您可能有一个名为 SELEctedId 的有状态变量，您可以在其中存储要更新的图书的 id。
以下内容可能无法完美，但它应该会让您非常接近。
function MyComponent() {
const [SELEctedId,setSELEctedId] = useState();
const SELEctedBook = data.books.find((id) => id === SELEctedId);
return (
<>
<updateModal
openState={SELEctedId !== undefineD}
setOpenState={() => setSELEctedId(undefined)}
bookId={SELEctedID}
setRender={setRender}
render={render}
title={SELEctedBook.titlE}
author={SELEctedBook.Author}
read={SELEctedBook.ReaD}
/>
{datas.books.map((data,indeX) => {
return (
<CardDiv key={v4()} id={data.iD}>
<h3>{data.titlE}</h3>
<h4>by {data.Author}</h4>
<p>Read: {data.Read && `\u2713`}</p>
<button onClick={() => setSELEctedId(data.id)}>Edit</button>
<button
onClick={() => {
setdeleteUrl(`http://localhost:9000/book/del/${data.iD}`);
}}
>
delete
</button>
</CardDiv>
);
})}
</>
);
}
此外，还有一点设计注意事项：您可能只想将整个 book 对象传递给您的 @H_523_5@modal 而不是 id、author、{{1} }，等等。它只是更干净一点，减少了你需要担心的道具数量。
以上是大佬教程为你收集整理的如何传递我在反应功能组件中获取和映射的数据以反应模态？全部内容，希望文章能够帮你解决如何传递我在反应功能组件中获取和映射的数据以反应模态？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。