如何将我在 React 功能组件中获取和映射的数据传递给 React Modal？

Question

我正在尝试使用 fetch PUT 更新特定对象。在主要组件中，我首先映射通过获取 GET 获得的数据并显示数据。然后，在点击时，我打开一个模式，我想将发生点击的单个对象传递给它。模态仅从地图中获取最后一个元素的数据。

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

我错过了什么？

Answer 1

看来您拥有的 Modal 个组件与您拥有的物品一样多。您可能想要使用稍微不同的架构并在循环外仅渲染一次 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 对象传递给您的 Modal 而不是 id、author、title, 等等。它只是更干净一点，减少了您需要担心的道具数量。

如何将我在 React 功能组件中获取和映射的数据传递给 React Modal？

How to pass data I fetched and mapped in react functional component to react modal?

modal-dialog

fetch

reactjs

array.prototype.map