mysql - 为什么我需要点击两次按钮才能显示数据？

Question

我在 ReactJS 中有一个代码，它加载两个异步函数（mysql 请求），然后根据 mysql 的响应，它在屏幕上呈现内容。

但问题是：我必须在“加载”中单击两次才能显示结果（在 {blocos} 中）。我知道 mysql 请求需要时间来加载，但我更喜欢等待而不是点击两次。我如何解决它？

function imprimeBlocos() {
        const aux = [];
        const subsistemas = dados.state.subsistemas;
        
        for (let i = 0; i < subsistemas.length; i++) {
          let children = [];
          const subsistemasItem = subsistemas[i];
          const pessoas = dados.state.pessoas;
          
          for (let j = 0; j < pessoas.length; j++) {
            const pessoasItem = pessoas[j];
            
            if (pessoasItem.referenciaidsubsistema === subsistemasItem.idsubsistema) {
              children.push((
                <div>
                <p>
                  {pessoasItem.nomecompleto}
                </p>
                  <form>
                    <p>Comunicação</p>
                    <input type="radio" name="opcao" value="op1" onClick={() => atualizaStateAvaliacao(pessoasItem.idpessoa,1,1)}/> Péssimo
                </form>
                <form>
                    <p>Companheirismo</p>
                    <input type="radio" name="opcao" value="op1" onClick={() => atualizaStateAvaliacao(pessoasItem.idpessoa,2,1)}/> Péssimo
                </form>
                <form>
                    <p>Pontualidade</p>
                    <input type="radio" name="opcao" value="op1" onClick={() => atualizaStateAvaliacao(pessoasItem.idpessoa,3,1)}/> Péssimo
                </form>
                <form>
                    <p>Proatividade</p>
                    <input type="radio" name="opcao" value="op1" onClick={() => atualizaStateAvaliacao(pessoasItem.idpessoa,4,1)}/> Péssimo
                </form>
                <form>
                    <p>Qualidade do trabalho</p>
                    <input type="radio" name="opcao" value="op1" onClick={() => atualizaStateAvaliacao(pessoasItem.idpessoa,5,1)}/> Péssimo
                </form>
                </div>
              ));
            }
          }
          
          aux.push((
            <React.Fragment key={subsistemasItem.idsubsistema}>
              <p>{subsistemasItem.nome}</p>
              {children}
            </React.Fragment>
          ));
        }

        aux.push((
            <React.Fragment key="qualquer">
                <div>
                    <br></br>
                    <button onClick={() => enviaAvaliacoes()}>ENVIAR</button>
                </div>
            </React.Fragment>
        ));
      
        setBlocos(aux);
      }

    async function selecionaPessoas(){
        return Axios.post("http://localhost:3001/api/selecionaPessoas", {
        }).then((response)=>{
            setPessoas(response.data);
            dados.setPessoas(pessoas);
            imprimeBlocos();
        });
    }

    async function selecionaSubsistemas(){
        return Axios.post("http://localhost:3001/api/selecionaSubsistemas", {
        }).then((response)=>{
            setSubsistemas(response.data);
            dados.setSubsistemas(subsistemas);
            selecionaPessoas(); //chama pessoas
        });
    }







return(

        <div>
            <div className = "pageAvaliacao">
                <button onClick={() => selecionaSubsistemas()}>LOAD</button>
                <div>
                    {blocos}
                </div>
            </div>
        </div>

    )

标签： mysqlreactjsexpress