如何在ReactJs中保存MySQL请求返回的结果？

现有代码存在的问题 #

• const声明的变量初始化后无法重新赋值，你给const data直接赋值会触发语法错误
• React中如果需要存储的数据要响应视图变化，必须用useState Hook声明，普通JS变量会在组件重渲染时被重置
• selecionaSubsistemas的then回调没有返回任何数据，就算请求成功await拿到的结果也为undefined
• 你在代码顶层直接执行console.log(data)，此时异步请求还未执行完成，必然无法拿到返回值

正确实现方案 #

如果需要存储的数据要用来渲染视图，使用useState存储，示例代码如下：

import { useState, useEffect } from 'react';
import Axios from 'axios';

function YourComponent() {
  // 初始值可根据接口返回结构调整，比如返回数组就设为[]
  const [subsistemasData, setSubsistemasData] = useState(null);

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

  const getData = async () => {
    const result = await selecionaSubsistemas();
    setSubsistemasData(result);
  };

  // 组件挂载时触发请求，也可绑定到点击等事件上按需触发
  useEffect(() => {
    getData();
  }, []);

  // 监听数据变化，请求完成后即可拿到存储的值做后续处理
  useEffect(() => {
    if (subsistemasData) {
      console.log('请求结果：', subsistemasData);
      // 后续业务逻辑写在这里
    }
  }, [subsistemasData]);

  return <div>{subsistemasData ? JSON.stringify(subsistemasData) : '加载中'}</div>
}

如果不需要数据触发视图更新，只是临时存储供逻辑调用，可以用useRef：

const subsistemasRef = useRef(null);

// 存储逻辑
const getData = async () => {
  const result = await selecionaSubsistemas();
  subsistemasRef.current = result;
  // 存储后即可直接访问
  console.log(subsistemasRef.current);
};

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