Реагировать на хуки - динамическое добавление и удаление компонента. Удалить проблему

Question

CODESANDBOX LINKE ПРЕДОСТАВЛЕНО!

Краткое изложение идеи приложения: Приложение для онлайн-экзаменов содержит два компонента: форму экзамена и вопрос. и компонент контекста: экзамен. экзаменационная форма содержит все динамически добавляемые пользователем вопросы. Пользователь также может УДАЛИТЬ вопросы. Каждый вопрос имеет уникальный идентификатор.

Предполагаемая функциональность: Вопросы хранятся в массиве контекста экзамена, чтобы они были доступны по экзаменационной форме и по вопросам. Идея заключается в том, что как только пользователь нажимает кнопку удаления вопроса, этот вопрос будет удален из массива контекста с использованием его идентификатора и, таким образом, отразит изменение в компоненте экзаменационной формы.

Проблема : Допустим, пользователь добавил 3 вопроса. Если пользователь нажимает кнопку «Удалить» на втором вопросе, то вместо этого будет удален третий вопрос, а второй вопрос будет иметь идентификатор третьего вопроса. Если он нажмет на 1-е, вместо этого будет удалено второе. Более странная часть состоит в том, что пользователь нажимает кнопку «Удалить» на последнем вопросе (скажем, на третьем), этот точный вопрос будет удален.

Все, что я хочу, - это удалить вопрос, который пользователь нажимает, не нарушая другие элементы array.

Пожалуйста, проверьте код, прежде чем делать предположения, спасибо.

CODESANDBOX LINK

Я изменил исходный код и вопросы, просто чтобы он прост, и большая часть стилей удалена только для демонстрационных целей.

Answer 1

Некоторые проблемы

1. Имя радиогруппы в каждом вопросе требует уникального атрибута «name», поскольку выбор любого радиопункта в любом вопросе повлияет на другой.

решение: добавьте значение id prop к атрибуту name, чтобы создать уникальную группу имен для каждого вопроса

<input type="radio" name={`sport_${id}`} value="soccer" />

Лог c для удаления вопроса из вопросов не должен находиться в самом вопросе.

возможное решение: предоставьте метод, к которому карта обращается со своим идентификатором, чтобы удалить себя из массив (см. код ниже)

Рендеринг ваших предметов был немного странным. Скорее сохраните данные в массиве и обработайте рендеринг в методе возврата. не забудьте свой ключ prop, иначе ваш выбор будет потерян (лучше всего сохранить это в состоянии)

экзамен. js

export const ExamProvider = ({ children }) => {
  const [questions, setQuestions] = useState([]);

  const removeQuestion = (id) => {
    setQuestions((questions) => questions.filter((q) => q.id !== id));
  };

  return (
    <Exam.Provider
      value={{
        questions,
        setQuestions,
        removeQuestion
      }}
    >
      {children}
    </Exam.Provider>
  );
};

Вопрос . js

const Question = ({ i, id}) => {
  const { removeQuestion } = useContext(Exam);

  return (
    <div className="q-main">
      {id}
      <div className="q-title">
        <h4>Which sport are you interested in the most?</h4>
        <div className="options">
          1. Soccer
          <input type="radio" name={`sport_${id}`} value="soccer" />
          2. Basketball
          <input type="radio" name={`sport_${id}`} value="basketball" />
          3. Bjj
          <input type="radio" name={`sport_${id}`} value="bjj" />
          4. MMA
          <input type="radio" name={`sport_${id}`} value="mma" />
        </div>
        <div className="name">
          Write your name:
          <input type="text" />
        </div>
      </div>
      <div className="delete">
        <button className="deletebtn" onClick={() => removeQuestion(id)}>
          Delete
        </button>
      </div>
    </div>
  );
};

export default Question;

ExamForm. js

import React, { useState, useContext } from "react";
import { Exam } from "../contexts/exam";
import uniqid from "uniqid";
import { IoIosAddCircle } from "react-icons/io";
import Question from "./Question";

const ExamForm = () => {
  const exam = useContext(Exam);

  const addQ = () => {
    const id = uniqid();
    exam.setQuestions((questions) => [
      ...questions,
      {
        id: id
      }
    ]);
  };

  return (
    <div className="form-main">
      <button onClick={addQ} className="addqcs">
        <IoIosAddCircle className="addicon" size={65} color="#0089d6" />
      </button>
      {exam.questions.map((q) => {
        return <Question key={q.id} i={exam.questions.length + 1} id={q.id} />;
      })}
    </div>
  );
};

export default ExamForm;

CodeSandbox