我面臨一個非常奇怪的問題，我的回應在第一個日志期間正確回傳，但稍后在console.log(data);將資料記錄到控制臺時它更改為 1 。
螢屏截圖顯示了模式：
如果將第一個陣列展開到它所說的下方data below from userEffect inside Gallery.js ，資料就會按預期顯示
然后是回應陣列，App.js它也按預期出現。
最后，回應神奇地1從內部轉換為 a Gallery.js，我不確定如何。關于如何解決此問題并在未轉換為1.
我究竟做錯了什么？我愿意接受任何代碼改進和任何其他更好實踐的建議:)。
這是App.js：
import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route, useHistory} from 'react-router-dom';
import ReactDOM from 'react-dom';
import '../../sass/HomePage/homePage.scss';
import LoginRegister from "./LoginRegister/LoginRegister";
import Gallery from "./Gallery/Gallery";
import Cookies from 'js-cookie';
const App = () => {
const [uploadsData, setUploadsData] = useState([]);
let { push } = useHistory();
let authToken = Cookies.get('token');
useEffect(() => {
getUploads();
},[])
function getUploads() {
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
}
axios.get('http://localhost:8005/api/get-uploads', {headers})
.then(resp => {
let uData = uploadsData.push(resp)
setUploadsData(uData);
console.log(uploadsData);
if (authToken !== null) {
push('/gallery');
} else {
console.log("User's NOT authenticated, returning to login view");
push('/');
}
}).catch(error => {
console.log(error);
})
}
return (
<>
<Switch>
<Route exact path="/" component={LoginRegister} />
<Route component={() => <Gallery data={uploadsData}/>} />
</Switch>
</>
);
}
export default App;
if (document.getElementById('example')) {
ReactDOM.render(<Router><App/></Router>, document.getElementById('example'));
}
這是Gallery.js：
import React, {useEffect} from 'react';
const Gallery = ( {data} ) => {
useEffect(() => {
console.log("FROM App.js INSIDE Gallery.js");
console.log(data);
}, []);
return (
<>
<h1>test</h1>
</>
);
}
export default Gallery;
uj5u.com熱心網友回復：
陣列的 push 方法總是回傳陣列的新長度（在您的情況下為 1），您將其設定為uploadsData狀態。
let uData = uploadsData.push(resp)
setUploadsData(uData);
并且您永遠不應該像那樣設定狀態值（可變）。相反，您應該像這樣一成不變地更新狀態：
let uData = [...uploadsData,resp];
setUploadsData(uData);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/378585.html
標籤：javascript 反应 调试