我剛剛開始使用React，并且已經發現自己處于回圈中。我正在構建一個從 Flask API 獲取資料的應用程式。到目前為止已經設定了所有內容，但我不想在第一頁上顯示所有資料。相反，我想從 API 中拆分資料并一次顯示 10 個。
我的問題是我設法拆分資料，但 DOM 不會在狀態更改時更新。到目前為止，這是我的代碼：
import React from 'react';
import Navbar from './Components/Navbar';
import Home from './Components/Home';
import {BrowserRouter as Router, Route, useHistory} from 'react-router-dom'
import Button from '@restart/ui/esm/Button';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 10
}
}
updateContent = (prevState) => {
this.setState({number: this.state.number 10});
}
render() {
return (
<Router>
<Navbar />
<Home perPage={this.state.number} />
<div class="text-center mt-3 mb-3">
{this.state.number}
<Button className='btn btn-primary' onClick={this.updateContent}>Mai multe intrebari</Button>
</div>
</Router>
);
}
}
export default App;
盡管數字是更新，我可以顯示更新{this.state.number}的DOM（在相同div的Button），改變它沒有更新我的Home組件：
<Home perPage={this.state.number} />
perPage我用來從我的 API 獲取資料的道具在哪里：
useEffect(() => {
fetch("my_flask_api/v1/?id=" props.perPage)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
},
PS：如果我手動更改number的值并正確更新 DOM，它會起作用，但它不會在setState().
歡迎任何想法。提前致謝！
uj5u.com熱心網友回復：
您需要注意兩件事：
this.setState(prevState => ({number: prevState.number 10}));- 您的 useEffect 應該將 props.perPage 作為陣列中的依賴項，以便獲得最近更新的值
useEffect(() => {...} , [props.perPage])
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318070.html
標籤：javascript 反应 dom 使用状态
上一篇：typecript中的async和await方法（angular）。
下一篇：單擊HTML按鈕拋出UncaughtTypeError:Cannotreadpropertiesofnull(reading'length')