在设置子组件的数组状态并将其通过反应测验传递回父组件时出现问题

Posted 2021-04-12

我是一名学生，对于我的项目，我的职责之一是测验。我从后端获取问题，在QuizContainer中执行componentDidMount，然后将每个问题作为道具传递给QuizForm。在QuizForm中，每个问题都有5个单选按钮，表示从完全不同意到完全同意的范围。当我在子组件（QuizForm）组件中设置setState时，它仅注册最后一个onClick事件，并且仅将其发送给父组件。我认为这可能是因为每个问题都是自己的QuizForm而呈现的，但是我不确定如何在父级内部收集所有数据（也许作为父级的状态，但是我不确定如何处理） ）。

这里是参考代码：

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

答案

您正在使用map（）方法，该方法基本上循环数组，所以是的，它会将每个问题呈现为不同的形式。您不应该将每个问题都以不同的形式放置，只需将它们包装成一个表格并从QuizForm中删除标签即可。

另外handleSubmit应该是将表单提交到后端（或w.e.），并创建另一个诸如handleChange之类的方法的方法，该方法接受参数并设置状态。

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

通过这种方式，您可以保留问题的名称（ID或类似的名称会更好）和选定的答案，并将其作为道具传递给QuizForm（它也需要重命名为诸如Question的东西），并检查单选是否匹配选择的答案。 。

您当前的QuizForm组件应该看起来像这样（它也应该是功能组件，而不是类）

            function Question({selectedAnswer, name, id}){
               return (
                  <>
                   <label htmlFor={id}>


                  </>
               );

            }