在初始渲染時，我有一個物件date，它是一個空陣列。然后我試圖從一個influxDB中獲取資料，但獲取的結果并沒有被React重新渲染所反映。get函式是在useEffect中呼叫的（你可以在截圖中看到這個）。我使用typescript，為了避免在初始加載時得到一個錯誤（資料是一個空的物件陣列，它沒有一個值屬性），我使用typescript的語法，但它仍然沒有顯示正確的值。它根本不顯示任何東西。
可能是什么原因？
問題可能是什么？在最后一張照片中，我們可以看到另一種從typescript中顯示沒有問號的資料的方法，但它也不能正確作業，即使陣列的長度大于0，它仍然沒有顯示data[0].value.
初始資料:
DB獲取后的資料：
獲取DB后的資料:獲取陣列中的第一個元素。
瀏覽器結果（在':'之前我們應該看到data[0].value）。
另一種方式（當資料不是空時，我們應該看到陣列中第一個物件的值）。
我還展示了我們的代碼
import React from 'react';
import './App.css'/span>;
import { FluxTableMetaData } from '@influxdata/influxdb-client'。
const { InfluxDB } = require('@influxdata/influxdb-client'/span>)。
export const App = （）=> {
除錯器[/span
const authData = {
token: 'Emyw1rqUDthYRLpmmBc6O1_yt9rGTT57O50zoKiXUoScAjL6G-MgUN6G_U9THilr86BfIPHMYt6_KSDNHhc9Jg=='/span>。
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: -d)`;
const data: any[] = [] 。
React.useEffect(() => {
queryApi.queryRows（query, {
next(row: string[] , tableMeta: FluxTableMetaData) {
debugger;
const o = tableMeta.toObject（row）。
const item = {
time: o._time,
測量: o._measurement,
field: o._field。
value: o._value。
};
return data.push（item）。
},
error(error: Error) {
return error。
},
complete（） {
console.log（資料）。
return data。
},
})
},[]);
debugger。
return (
<div>/span>
<div>{data.length !== data[0].value}：</div>
<div>hello</div>
</div>
);
};
另一種方法：
<div>
<div>{data[0]?.value}:</div>
<div>hello</div>
</div>
uj5u.com熱心網友回復：
我建議你用React狀態來實作，方法如下
var [nameOfVariableWhichWillChange, changeFunction] = React. useState("") 。
現在無論哪個函式想要改變該函式的值，只需使用changeFunction(newValueOfVariable)。
使用React狀態的好處是，無論你在哪里使用該變數，當該變數發生變化時，每個實體都會自行改變。
請讓我知道這是否解決了你的問題，或者你需要其他東西
uj5u.com熱心網友回復：
即使資料已經改變，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
uj5u.com熱心網友回復：
你的代碼中的主要問題是，你將資料定義為一個const變數，而不是一個state。因此，在useEffect中，即使你的data被改變，它也不會反映在data[0].value上，因為它是一個常量變數，而react不會渲染變數的更新值。只有當它是一個狀態時，它才會更新/呈現。
簡而言之，將你的const資料轉換為state，并使用setState，就像下面這樣，你的代碼才能正常作業！
const [data, setData] = React.useState([] ）。)
...
setData（[...data , item]）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/307930.html
標籤：
上一篇：如何阻止Array不斷地重新渲染