RangeError：最大调用堆栈大小超出了 Reactjs？

Question

RangeError: 超出 Reactjs 的最大调用堆栈大小？ 代码工作正常，但是当我单击最后一个测验时显示错误 RangeError：超出最大调用堆栈大小 另外分数没有显示在下面的红色标记图像中请帮助我如何解决这个问题我是新的反应

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Questionlist from './quiz/Questionlist.jsx';
import Scorebox from './quiz/Scorebox.jsx';
import Results from './quiz/Results.jsx';
import * as serviceWorker from './serviceWorker';

class Quiz extends React.Component {
    constructor(props){
        super(props);
            this.state= {
                questions : [
                    {
                        id: 1,
                        text: 'What is your name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Michael'
                            },
                            {
                                id: 'b',
                                text: 'Brand'
                            },
                            {
                                id: 'c',
                                text: 'Steven'
                            },
                        ],
                        correct: 'b'
                    },
                    {
                        id: 2,
                        text: 'What is your mother name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Sara'
                            },
                            {
                                id: 'b',
                                text: 'Denny'
                            },
                            {
                                id: 'c',
                                text: 'senny'
                            },
                        ],
                        correct: 'c'
                    },
                    {
                        id: 3,
                        text: 'What is your father name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Bobby'
                            },
                            {
                                id: 'b',
                                text: 'Harry'
                            },
                            {
                                id: 'c',
                                text: 'Waye'
                            },
                        ],
                        correct: 'c'
                    },
                    {
                        id: 4,
                        text: 'What is your friend name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'John'
                            },
                            {
                                id: 'b',
                                text: 'Paul'
                            },
                            {
                                id: 'c',
                                text: 'Jose'
                            },
                        ],
                        correct: 'a'
                    },
                ],
                score: 0,
                current: 1
            }
    }

    setCurrent(current){
        this.setState({current});
    }
    setScore(score){
        this.setScore({score});
    }

    render() {
        if(this.state.current > this.state.questions.length){
            var scorebox = '';
            var results = <Results {...this.state} />
        }else{
            scorebox = <Scorebox {...this.state} />
            var results = '';
        }
        //return <Questionlist questions={this.state.questions} />
        return(
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        <h1>Quiz</h1>
                        {scorebox}      
                        <Questionlist {...this.state} setCurrent={this.setCurrent.bind(this)} setScore={this.setScore.bind(this)} />
                        {results}
                    </div>
                </div>
            </div>
        )
    }
}


ReactDOM.render(<Quiz  />, document.getElementById('root'));
serviceWorker.unregister();

问题列表.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Question from './Question.jsx';

class Questionlist extends React.Component {

    render() {
        return(
            <div className="question">
                {
                    this.props.questions.map(question => {
                        //console.log(question.id);
                        //console.log(this.props.current);
                        if(question.id == this.props.current){
                            return <Question question={question} key={question.id} {...this.props}  />
                        }
                        
                    })
                }
            </div>
        )
    }
}

export default Questionlist

问题.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Question extends React.Component {
    onChange(e){
        e.preventDefault();
        const {setCurrent, setScore, question} = this.props;

        let selected = e.target.value;

        if(selected == question.correct){
            setScore(this.props.score+1);
        }

        setCurrent(this.props.current+1)
    }
    render() {
        const {question} = this.props;
        return(
            <div className="well">
                <h3>{question.text}</h3>
                <hr />
                <ul className="list-group">
                    {
                        this.props.question.choices.map(choice => {
                            return(
                                <li className="list-group-item" key={choice.id}>
                                    {choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Question

Scorebox.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Scorebox extends React.Component {

    render() {
        console.log(this.props);
        return(
            <div className="well">
                Question {this.props.current} out of {this.props.questions.length} <span className="pull-right"><strong>Score: {this.props.score}</strong></span>
            </div>
        )
    }
}

export default Scorebox

结果.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Results extends React.Component {

    render() {
        var percent = (this.props.score / this.props.questions.length * 100);
        if(percent > 80){
            var message = "Awesome";
        }else if(percent < 80 && percent > 60){
            var message = "You did ok";
        }else{
            var message = "You did Harriable";
        }
        return(
            <div className="well">
                <h4>You Got {this.props.score} out of {this.props.questions.length} Correct</h4>
                <h1>{percent}% - {message}</h1>
                <hr />
                <a href="/app">Take Again</a>
            </div>
        )
    }
}

export default Results

Answer 1

当您在onChange 事件的Question 组件上调用此方法时，index.js 中的此方法将导致无限循环❌

setScore(score){
    this.setScore({score});
}

你想要的是设置新的状态，而不是重新调用方法✅

setScore(score){
    this.setState({score});
}