Блог

Я пытаюсь обновить определенные объекты с помощью fetch PUT. В основном компоненте я сначала сопоставляю свои данные, которые я получил с помощью fetch 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 amp;amp; `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>
          );
        })

 

Чего мне не хватает?

Похоже, у вас будет столько 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 amp;amp; `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 , и т.д. по отдельности. Это просто немного чище и уменьшает количество реквизитов, о которых вам нужно беспокоиться.