状态变化时更新组件 - REACT

Question

我刚刚开始使用 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;

即使数字已更新并且我可以在 DOM 中显示更新后的 {this.state.number}（与 Button 相同的 div），更改它不会更新我的 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() 上执行。

欢迎任何想法。提前致谢！

Answer 1

您需要注意两件事：

this.setState(prevState => ({number: prevState.number + 10}));
您的 useEffect 应该有 props.perPage 作为数组中的依赖项，以便它获得最近更新的值 useEffect(() => {...} , [props.perPage])

状态变化时更新组件 - REACT

Update Component on State Change - REACT

javascript

dom

reactjs

use-state