反应不呈现最新价值

Question

对于初始渲染，我有 object date，这是一个空数组。然后，我尝试从 influxDB 获取数据，但 React 未使用 re-render 反映获取结果。 get 函数在 useEffect 中调用（您可以在屏幕截图中看到这一点）。我使用打字稿，为了避免在初始加载时出错（数据是 object 的空数组，它没有值属性），我使用打字稿语法，但它仍然没有显示正确的值。它根本不显示任何内容。

可能是什么问题？在最后一张照片中，我们可以看到另一种显示数据的方式，没有打字稿的问号，但它也不能正常工作，即使数组的长度大于0，它仍然不显示data[0].value.

初始数据:

DB获取后的数据:

获取数组中的第一个元素：

浏览器结果（在':'之前我们应该看到data[0].value）：

替代方法（当数据不为空时，我们应该看到数组中第一个 object 的值）：

我也给我们看代码

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

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

export const App = () => {
  debugger
  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)`;

  const data: any[] = [];
  React.useEffect(() => {
    queryApi.queryRows(query, {
      next(row: string[], tableMeta: FluxTableMetaData) {
        debugger;
        const o = tableMeta.toObject(row);
        const item = {
          time: o._time,
          measurement: o._measurement,
          field: o._field,
          value: o._value,
        };
        return data.push(item);
      },
      error(error: Error) {
        return error;
      },
      complete() {
        console.log(data)
        return data;
      },

    })
  },[]);

  debugger;
  return (
    <div>
      <div>{data.length !== data[0].value}:</div>
      <div>hello</div>
    </div>
  );
};

另一种方式：

<div>
  <div>{data[0]?.value}:</div>
  <div>hello</div>
</div>

Answer 1

我建议您通过以下方式使用 React 状态

var [nameOfVariableWhichWillChange, changeFunction] = React.useState("");

现在，无论哪个函数想要更改该函数的值，只需使用 changeFunction(newValueOfVariable) 使用 React state 的优点是你可能在任何地方使用那个变量来改变那个变量，每个实例都会自己改变...... 请告诉我这是否解决了您的问题，或者您还需要其他东西

Answer 2

即使数据已更改，React 也不会重新呈现网页。您需要将数据存储在 React.useState 中并调用 setState 触发重新渲染。

const [data, setData] = useState([])

React.useEffect(() => {
  ...
  next(row: string[], tableMeta: FluxTableMetaData) {
    ...
    setData([...data, item])
  },
...

在此处阅读有关 useState 的更多信息：https://reactjs.org/docs/hooks-state.html

Answer 3

代码中的主要问题是，您已将数据定义为 const 变量，而不是 state。因此，在 useEffect 中，即使您的 data 发生更改，它也不会反映在 data[0].value 上，因为它是一个 const 变量并且 React 不会呈现变量的更新值。它 updates/renders 仅当它是一个状态时。

简而言之，将您的 const 数据转换为 state 并像下面那样使用 setState 让您的代码正常工作！

const [data, setData] = React.useState([]);
...
setData([...data , item]);

反应不呈现最新价值

react doesn't render latest value

typescript

reactjs

react-dom

use-effect