好吧,我有一个来自单页应用程序的视图(即测验),但是当单击以基于数组状态信息的循环通过循环生成组件时,他不会呈现它。我在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>
);
}
}
最佳答案
也许我正在忽略某些东西...但是看起来好像您从未调用过alterarevento
和gerargabarito
函数。因此,当您调用eachcomponent
时,处于状态的correcao数组仍然为空,因此您未映射任何内容。
在eachcomponent
函数中的return语句之前,请尝试将correcao
登录到控制台以查看其是否为空。
提醒您:永远不要直接操纵状态。因此,您的this.state.correcao.push('Certa');
行应为:this.setState({ correcao: [...this.state.correcao, 'Certa'] });