React中Ajax异步获取数据后Google Chart无法加载问题

异常和异步请求逻辑、接口返回数据格式无关，是代码本身的写法错误导致的，共有4个直接触发问题的点：

• useState 初始化语法错误：useState 仅接收1个初始值参数，原代码写的useState(['x','sensor'],[0,0])会把第二个参数[0,0]直接忽略，初始状态不是Google Chart要求的「表头+数据行」二维数组结构。
• 状态更新时错误转换数据类型：接口返回处理完的_v1本身是符合要求的二维数组，原代码调用setV1(JSON.stringify(_v1))把数组转成了JSON字符串，Chart组件无法识别字符串格式的数据源；硬编码场景下传入的是原生数组而非字符串，所以可以正常渲染。
• 组件属性绑定错误：代码用的是函数组件+Hook写法，不存在类组件的this.state对象，原代码Chart组件写的data={this.state.data}始终拿不到实际的v1状态值，状态更新后组件根本接收不到新数据。
• 额外干扰项：setV1是React的异步批处理操作，更新后立刻console.log(v1)拿到的还是旧值，属于React状态机制的正常表现，不影响渲染，但很容易干扰问题排查方向。

按以下步骤调整即可：

1. 修正useState初始化逻辑，传入符合Google Chart要求的二维数组初始结构
2. 去掉setV1时多余的JSON.stringify调用，直接传入处理完成的二维数组
3. 统一表头字段名，避免初始化和接口处理时表头不一致导致的系列识别异常
4. 修正Chart组件的data属性绑定，直接关联Hook管理的v1状态
5. 可选：增加空数据判断，首次请求未完成时显示加载提示，避免Chart接收到非法空值报错

修复后的核心代码如下：

// 初始化状态：传入正确的二维数组初始值
const [v1, setV1] = useState([['x','sensor'],[0,0]]);

const options = {
  title: "Box Office Earnings in First Two Weeks of Opening",
  subtitle: "in millions of dollars (USD)",
  interpolateNulls: true
};

async function getAllSensorProfile(sensorIdList, sensorSubId, starttime, endtime) {
  sensorIdList = JSON.stringify(sensorIdList);
  try {
    const result = await deviceService.GetTimeSeriesListBySensorIdListTimeRange(sensorIdList, sensorSubId, starttime, endtime);
    // 表头和初始化保持一致
    const _v1 = [['x', 'sensor']];
    // 遍历处理数值类型，不需要返回新数组用forEach更合理
    result.forEach(str => {
      str[1] = parseFloat(str[1]);
    });
    const formatData = _v1.concat(result);
    // 直接传入数组，不要转JSON字符串
    setV1(formatData);
  } catch (error) {
    console.log(error);
  }
}

// 组件渲染部分：直接绑定v1状态，去掉类组件的this.state写法
// 增加加载判断：v1长度小于等于1时说明只有表头没有实际数据，显示加载提示
{v1.length > 1 ? (
  <Chart
    chartType="LineChart"
    data={v1}
    options={options}
    width={"70%"}
    height={"400px"}
  />
) : <div>数据加载中...</div>}

内容的提问来源于stack exchange，提问作者Caitlin Cen