我有一個帶有名稱串列（可能會更改）的 API，然后我想從該串列中創建路由，但我不斷收到未找到路由的錯誤。但是，當手動添加名稱的路線時，它會起作用。如何在頁面加載后添加路由以使其作業這是我的代碼如下
function App() {
let json =[]
fetch(`${baseURL}/applications/`).then(response =>{return response.json();}).then(data =>{json=data})
console.log("json =", json)
return (
<Router>
<div className="App">
<header className="App-header">
<Routes>
<Route path="/" exact element={<ApplicationsList/>}/>
<Route path={"/1080p-Lock"} exact element={<ApplicationPage name={"1080p-Lock"}/>}/>
{json.map(item => {ReactDOM.render(<Route path={"/" item} exact element={<ApplicationPage name={item}/>}/>)})}
</Routes>
</header>
</div>
</Router>
);
}
uj5u.com熱心網友回復：
問題
React 的渲染函式是一個同步的純函式，它不能等待異步邏輯完成。json每個渲染周期，該值都會重置為一個空陣列。
路由映射只需要回傳Route需要渲染的組件，ReactDOM這里使用不是很有效。
解決方案
使用組件狀態來存盤獲取的資料和一個掛載useEffect鉤子來發出獲取請求。
function App() {
const [routes, setRoutes] = useState([]);
useEffect(() => {
fetch(`${baseURL}/applications/`)
.then(response => {
return response.json();
})
.then(data => {
setRoutes(data);
})
.catch(error => {
// handle any rejected Promises, etc...
});
}, []);
return (
<Router>
<div className="App">
<header className="App-header">
<Routes>
<Route path="/" element={<ApplicationsList/>}/>
<Route path={"/1080p-Lock"} element={<ApplicationPage name={"1080p-Lock"}/>}/>
{routes.map(item => (
<Route path={"/" item} element={<ApplicationPage name={item}/>}/>
))}
</Routes>
</header>
</div>
</Router>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363233.html
標籤：javascript 反应 网络 反应路由器 反应路由器-dom