Проблемы с установкой состояния массива дочернего компонента и передачей его родителю в ответной викторине

Question

Я студент, и для моего проекта одна из моих функций - это тест. Я получаю вопросы из своего бэкэнда, выполняю componentDidMount внутри QuizContainer, а затем передаю каждый вопрос в QuizForm в качестве реквизита. Внутри QuizForm у меня есть 5 радио-кнопок для каждого вопроса, которые представляют диапазон от полностью не согласен до полностью согласен. Когда я устанавливаю setState внутри дочернего компонента (QuizForm), он регистрирует только последнее событие onClick и отправляет его только родителю. Я думаю, что это может представлять каждый вопрос как его собственный QuizForm, но я не уверен, как собрать все эти данные внутри родителя (может быть, как состояние родителя, но я не уверен, как бы я go об этом).

Вот код для справки:

QuizContainer

state = {
        all: []
    }

    handleSubmit = (evt, quizObj) => {
        evt.preventDefault()
        this.setState = {
            all: [...this.state.all, quizObj]
        }
    }

 render() {
        return (
            <container className="quiz">
            <h5>For each of the following statements choose on a scale of 1 - 5, one strongly disagree and 5 being strongly agree, and 3 being neutral. </h5>
                <div> {this.props.questions.questions.map(question => <QuizForm question={question} key={question.id} handleSubmit={this.handleSubmit}/>)}
                    <input form="quiz-form" type="submit" value="Submit" />
                </div> 
            </container>
        )
    }

QuizForm

state = {
        question: [],
        answer: []
    }

    handleChange = (evt) => {
        let name = evt.target.name
        let value = evt.target.value


            this.setState({
                questions: [...this.state.questions, name],
                answers: [...this.state.answers, value]
            })

    }



    render() {
        return (
            <form id="quiz-form" onSubmit={(evt) => this.props.handleSubmit(evt, this.state)}>
                <label htmlFor="question">{this.props.question.question}</label>
                <input onChange={this.handleChange}
                    type="radio"
                    name={this.props.question.id}
                    value={0}
                />
                <input onChange={this.handleChange}
                    type="radio"
                    name={this.props.question.id}
                    value={25}
                />

                </form>
        )
    }

Answer 1

Вы используете метод map (), который в основном циклично обрабатывает массив, так что да, он отображает каждый вопрос в различной форме. Вы не должны ставить все вопросы в разные формы, просто оберните их все в один и удалите тег из QuizForm.

Кроме того, handleSubmit должен быть методом, который отправляет форму бэкэнду (или нам), и создает другой метод, такой как handleChange или что-то еще, который принимает аргумент и устанавливает состояние.

handleChange(questionName, selectedAnswer){
   this.setState({...answers, {questionName, selected: selectedAnswer}})
}

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

Ваш текущий компонент QuizForm должен выглядеть примерно так (который также должен быть функциональным компонентом, а не классом)

             const radioButtons = [{id: 'first', value: 1}, id:'second', value: 2];
              function Question({selectedAnswer, question, name, id}){
                 return (
                    <>
                   <label htmlFor={id}>{question}</label>
                   {radioButtons.map(({id: btnId, value}) => 
                      {<input type="radio" id={id.concat(btnId)} 
                        {selectedAnswer === value ? checked : null}
                        name={name} value={value} />})}
                  </>
               );
            }

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