Как передать данные, которые я получил и сопоставил в функциональном компоненте реакции, чтобы реагировать модально?

Я пытаюсь обновить определенные объекты с помощью 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>
          );
        })

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


reactjs fetch modal-dialog array.prototype.map
person nuke7    schedule 21.02.2021    source источник
comment
Похоже, у вас будет столько Modal компонентов, сколько у вас предметов. Возможно, вы захотите перейти к немного другой архитектуре и визуализировать Modal только один раз, вне цикла. Я сформулирую это в виде ответа   -  person Nick    schedule 21.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

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

person Nick    schedule 21.02.2021
comment
Спасибо @Nick, я обнаружил свою проблему - мне нужно было передать реквизиты моему компоненту (React Modal), а не только функцию, которая возвращает модальный компонент. - person nuke7; 11.03.2021
comment
... с оператором распространения, например: {...props} - person nuke7; 11.03.2021