Question

好吧，我有一个来自单页应用程序的视图（即测验），但是当单击以基于数组状态信息的循环来生成组件时，他不会呈现它。我在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

也许我忽略了某件事...但是看起来好像您从未调用过alterarevento和gerargabarito函数。因此，当您调用eachcomponent时，处于状态的 correcao数组仍然为空，因此您没有映射任何内容。

在eachcomponent函数中的return语句之前，尝试将correcao登录到控制台以查看其是否为空。

请注意：永远不要直接操纵状态。因此，您的this.state.correcao.push('Certa');

行应为：

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

React子组件循环未变红

1 个答案: