React子组件循环未重新注册

Question

好吧，我的单页应用程序中有一个视图是Quiz，但当点击根据我的数组状态信息通过循环生成组件时，他不会渲染它。我在index.js中使用react router，也许这些信息会有所帮助。

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

也许我忽略了什么。。。但看起来您从未调用过CCD_ 1和CCD_ 2函数。因此，当您调用eachcomponent时，您所在状态下的correcao数组仍然为空，因此您没有映射任何内容。

在eachcomponent函数中的return语句之前，请尝试将correcao记录到控制台，看看它是否为空。

一个警告：你永远不应该直接操纵你的状态。所以，你的this.state.correcao.push('Certa');

行应该是：

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