Реагировать на дочерний компонентный цикл не восстанавливая

Question

Что ж, у меня есть одно из представлений из моего одностраничного приложения, которое представляет собой викторину, но когда он щелкает, чтобы сгенерировать компоненты через цикл на основе информации о состоянии моего массива, он не отображает его.Я использую реагирующий маршрутизатор в index.js, возможно, эта информация может помочь.

Gabarito.js

 return(
      <div>
    <h1 className="display-1">Resposta-#{this.props.chave}- 
     {this.props.alternativa}</h1>
    </div>);

Тест

state = {       
    respostas:[10],
    gabarito:['Verdadeiro','Falso','Falso','Verdadeiro','Verdadeiro','Falso','Verdadeiro','Falso','Verdadeiro','Verdadeiro'],
    correcao:[],
    novogabarito: this.eachcomponent


  }
  alterarevento = (evento,index) =>{
      let array = this.state.respostas;
      array[index] = evento.target.value;
      this.setState({respostas:array}); 
      console.log(this.state.respostas[index])

  }
  gerargabarito = () =>{
    for(let n=0;n<10;n++){
        if(this.state.respostas[n]===this.state.gabarito[n]){
            this.state.correcao.push('Certa');
        }
        else{
           this.state.correcao.push('Errada');
        }
    }
    console.log(this.state.correcao);
  }
  eachcomponent = () =>{
    return(this.state.correcao.map(resposta=><Gabarito chave={this.state.correcao.indexOf(resposta)} alternativa={resposta}/>));

  }

Визуализация функции

<div className="row justify-content-center">
                <span id="teste">{this.state.novogabarito}</span>
            </div>

        </div>
     );
}
 }   

Answer 1

Возможно, я что-то упускаю ... но не похоже, что вы когда-либо вызывали свои функции alterarevento и gerargabarito.Поэтому, когда вы вызываете ваш eachcomponent, ваш массив correcao в вашем состоянии все еще пуст, поэтому вы ничего не отображаете.

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

Слово предостережения : вы никогда не должны напрямую манипулировать своим состоянием.Итак, ваша строка this.state.correcao.push('Certa');

должна быть:

this.setState({ correcao: [...this.state.correcao, 'Certa'] });