ReactJS中如何让被异步函数调用的函数在判断逻辑内渲染内容？

第一步：修复异步调用逻辑问题 #

现有代码存在两个易导致数据异常的问题：

• 状态更新函数（setSubsistemas/setPessoas）是异步执行的，执行后立刻读取对应状态变量拿到的是更新前的旧值
• 链式调用异步函数未加await，可能出现时序错乱
  修复后的异步逻辑如下：

// 函数b
async function selecionaPessoas() {
  const response = await Axios.post("http://localhost:3001/api/selecionaPessoas", {});
  const novaPessoas = response.data;
  setPessoas(novaPessoas);
  dados.setPessoas(novaPessoas);
  // 原生JS项目保留下面这行调用，React项目不需要手动调用渲染函数
  // imprimeBlocos();
}

// 函数a
async function selecionaSubsistemas() {
  const response = await Axios.post("http://localhost:3001/api/selecionaSubsistemas", {});
  const novaSubsistemas = response.data;
  setSubsistemas(novaSubsistemas);
  dados.setSubsistemas(novaSubsistemas);
  await selecionaPessoas(); // 加await等待异步函数执行完成
}

第二步：实现p标签渲染逻辑 #

分两种常见开发场景处理：

场景1：原生JavaScript项目 #

首先在HTML中提前准备渲染容器：

<div id="conteudo"></div>

改写imprimeBlocos函数，生成p标签插入容器即可：

function imprimeBlocos() {
  const container = document.getElementById('conteudo');
  // 清空历史内容
  container.innerHTML = '';
  for (var i = 0; i < dados.state.subsistemas.length; i++) {
    // 渲染子系统名称
    const pSubsistema = document.createElement('p');
    pSubsistema.textContent = dados.state.subsistemas[i].nome;
    pSubsistema.style.fontWeight = 'bold'; // 可自定义样式区分层级
    container.appendChild(pSubsistema);

    for (var j = 0; j < dados.state.pessoas.length; j++) {
      if (dados.state.pessoas[j].idsubsistema === dados.state.subsistemas[i].id) {
        // 渲染对应人员名称
        const pPessoa = document.createElement('p');
        pPessoa.textContent = dados.state.pessoas[j].nomecompleto;
        pPessoa.style.textIndent = '2em'; // 可自定义样式区分层级
        container.appendChild(pPessoa);
      }
    }
  }
}

场景2：React项目 #

不需要手动操作DOM，也不需要imprimeBlocos函数，直接在JSX模板中写渲染逻辑即可，状态更新后会自动重渲染：

function SeuComponente() {
  // 原有状态定义、异步调用逻辑保留即可
  return (
    <div className="conteudo">
      {dados.state.subsistemas.map(subsistema => (
        <React.Fragment key={subsistema.id}>
          <p style={{fontWeight: 'bold'}}>{subsistema.nome}</p>
          {dados.state.pessoas
            .filter(pessoa => pessoa.idsubsistema === subsistema.id)
            .map(pessoa => (
              <p key={pessoa.id} style={{textIndent: '2em'}}>{pessoa.nomecompleto}</p>
            ))
          }
        </React.Fragment>
      ))}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Paulo Henrique