我一直在嘗試使用 react-router-dom 中的 useNavigate() 和 useLocation() 將 JSON 物件從一個組件傳遞到另一個組件。我嘗試了各種方法來執行此操作，遵循this和this。問題是，我在單擊按鈕后觸發的異步函式中呼叫 navigate()，因此我無法使用我想象的 Link 組件。
它的作業原理是，一旦單擊提交按鈕，它就會觸發 API 呼叫。理想情況下，一旦接收到 JSON 物件，就會呼叫 navigate()，將 JSON 物件傳遞給下一個組件。但是，我不斷收到“null”或空物件。
請檢查此鏈接以了解我的意思。
從 useLocation 訪問時結果的控制臺日志輸出截圖
App.JS 路線：
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/start/:id" element={<Start/>} />
<Route path="/quiz/:id" element={<Quiz/>} />
<Route path="/results" element={<Results />} />
</Routes>
</BrowserRouter>
從“測驗”導航到“/結果”，將結果（JSON 物件）傳遞到：
import { useLocation } from "react-router-dom";
...
const toResults=()=>{
console.log(results); // *Properly displays JSON object in console)*
navigate('/results', {state: results});
}
從“/results”訪問 JSON（不作業）：
import { useLocation } from "react-router-dom";
...
const { state } = useLocation();
useEffect(() => {
console.log("Results from results page: ");
console.log(state);
}, [])
呼叫 toResults() 的 API 呼叫：
async function submitQuiz(event){
event.preventDefault();
console.log(id);
console.log(answer);
//Post request passes question ID and student answer to server.
const response = await fetch('http://localhost:3001/api/quiz', {
method: 'POST',
headers:{
'Content-Type': 'application/json' ,
'Accept': 'application/json'
},
body: JSON.stringify({
id,
answer
})
} ) .then(response => response.json())
.then(data => {
console.log(data);
setResults(data);
toResults();
});
}
我將不勝感激有關如何從 useLocation 正確訪問資料的任何指導，或者是否有更有效的方法來完成此操作。
謝謝！
uj5u.com熱心網友回復：
問題
這里的問題results是您的 React 狀態和排隊的 React 狀態更新不會立即處理。
.then(data => {
console.log(data);
setResults(data); // <-- enqueued state update
toResults(); // <-- uses current `results` state
});
...
const toResults=()=>{
console.log(results); // <-- not updated state yet
navigate('/results', {state: results});
}
解決方案
你很可能根本不需要result狀態。由于您正在遠離此組件，因此無論如何都會對狀態進行垃圾收集。只需使用回應資料發出命令式導航請求。
例子：
async function submitQuiz(event){
event.preventDefault();
console.log(id);
console.log(answer);
//Post request passes question ID and student answer to server.
const response = await fetch(
'http://localhost:3001/api/quiz',
{
method: 'POST',
headers: {
'Content-Type': 'application/json' ,
'Accept': 'application/json'
},
body: JSON.stringify({
id,
answer
})
})
.then(response => response.json())
.then(data => {
console.log(data);
navigate('/results', { state: data }); // <-- navigate with result here
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/477179.html
標籤：javascript 反应 json 反应路由器 反应路由器dom