React.js сгенерирует новое случайное число

Question

Я пытаюсь создать новое случайное число, которое будет установлено как состояние после метода. Он отлично работает при обновлении, но я не могу «сгенерировать» новый номер после нажатия кнопки.

Вот мой код в данный момент:

var QuizContainer = React.createClass({ 

    randomNumber: function(){ 
    return Math.floor((Math.random() * Data.length) + 0); 
    }, 

    getInitialState: function(){ 
    var rand = this.randomNumber(); 
    return { 
     answerList: Data[rand].answer, 
     answerQuestion: Data[rand].question, 
     correctAnswer: Data[rand].correct, 
     score: 0, 
     timer: 30 
    } 
    }, 

    success: function(){ 
    this.setState({score: this.state.score + 1}) 
    }, 

    fail: function(){ 
    this.setState({score: 0}) 
    this.getInitialState(); 
    }, 

    handleClick: function(child){ 
    child.props.singleAnswer == this.state.correctAnswer ? this.success() : this.fail() 
    }, 

    render: function(){ 
    return(
     <div> 
     <Timer timer={this.state.timer} /> 
     <Score currentScore={this.state.score} /> 
     <QuestionContainer answerQuestion={this.state.answerQuestion} /> 
     <ButtonContainer onClick={this.handleClick} correctAnswer={this.state.correctAnswer} answerList={this.state.answerList} /> 
     </div> 
    ) 
    } 

}) 

module.exports = QuizContainer; 

Если кто может помочь я был бы очень благодарен! Благодаря!

Answer 1

getInitialState возвращает объект. Вы просто вызываете this.getInitialState() и выбрасываете объект. Для обновления состояния необходимо вызвать this.setState

fail: function(){ 
    this.setState(this.getInitialState()); 
    }, 

Там нет волшебной обертки getInitialState, функция просто делает то, что вы говорите это сделать, и он используется реагирует, когда Instancing вашего компонента.

Я удалил this.setState({score: 0}), потому что он предоставлен вашим getInitialState.

---

Кроме того, ButtonContainer должен быть пропускание ответа вверх, не обновляя свои реквизита и передавая себя функцию обратного вызова OnClick. Если вы читаете реквизит, отличный от своего, что-то не так.

Answer 2

Смотрите этот пример: https://jsfiddle.net/danyaljj/1cban4oy/

var colors = ['silver', 'gray', 'red', 'maroon', 'yellow', 'olive', 'lime', 'green', 
       'aqua', 'teal', 'blue', 'navy', 'fuchsia', 'purple']; 

var category = {"cat": "1"}; 

class SampleApplication extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { BKColor: 'red', question: {}}; 
    } 
    render() { 
    var rand = Math.floor((Math.random() * 8)); 
    return (
     <table> 
      <tr> 
       <th style={{ backgroundColor: colors[rand] }}>Month</th> 
       <th>{colors[1]}</th> 
       </tr> 
       <tr> 
       <td>January {rand}</td> 
       <td>$100</td> 
       </tr> 
       <tr> 
       <td>February</td> 
       <td>$80</td> 
       </tr> 
     </table> 
     ); 
    } 
} 

React.render(<SampleApplication />, document.body); 

сгенерировать таблицу с одной ячейкой цветной случайным образом.