React不渲染从InfluxDB获取的最新值，是什么原因导致的？

问题根因 #

你定义的data是组件内的普通局部变量，不属于React的响应式状态，React不会监听这类变量的变更，即便你在接口回调中往数组里push了数据，也不会触发组件重新渲染，render函数始终拿到的是初始的空数组，因此无法展示预期内容。

同时你的原渲染逻辑存在语法错误：{data.length !== data[0].value}是布尔判断表达式，即便数据正常也不会输出你想要的value值。

修复方案 #

1. 使用useState定义响应式的data状态，修改状态时会自动触发组件重渲染
2. 在InfluxDB查询完成的complete回调中统一更新状态
3. 修正渲染逻辑，增加非空判断避免运行时报错

修正后代码 #

import React from 'react';
import './App.css';
import { FluxTableMetaData } from '@influxdata/influxdb-client';

const { InfluxDB } = require('@influxdata/influxdb-client');

export const App = () => {
  const authData = {
    token: 'Emyw1rqUDthYRLpmmBc6O1_yt9rGTT57O50zoKiXUoScAjL6G-MgUN6G_U9THilr86BfIPHMYt6_KSDNHhc9Jg==',
    org: 'testOrg',
    bucket: 'test-bucket',
  };

  const client = new InfluxDB({
    url: 'http://localhost:8086',
    token: authData.token,
  });

  const queryApi = client.getQueryApi(authData.org);
  const query = `from(bucket: "${authData.bucket}") |> range(start: -1d)`;

  // 用useState定义响应式状态
  const [data, setData] = React.useState<any[]>([]);

  React.useEffect(() => {
    const tempData: any[] = [];
    queryApi.queryRows(query, {
      next(row: string[], tableMeta: FluxTableMetaData) {
        const o = tableMeta.toObject(row);
        const item = {
          time: o._time,
          measurement: o._measurement,
          field: o._field,
          value: o._value,
        };
        tempData.push(item);
      },
      error(error: Error) {
        console.error('查询失败：', error);
      },
      complete() {
        // 查询完成后统一更新状态，触发重渲染
        setData(tempData);
      },
    })
  },[]);

  return (
    <div>
      {/* 可选链写法，空数据时不会显示内容也不会报错 */}
      <div>{data[0]?.value}:</div>
      <div>hello</div>
    </div>
  );
};

额外说明 #

你也可以在next回调中逐条更新状态，不过统一在查询完成后更新的性能更好，避免多次触发重渲染。

内容的提问来源于stack exchange，提问作者Oleh Strokan