Question

我还有新的反应，目前我正试图创建一个分页来从我的后端获取数据列表我的问题是我需要两次单击页面按钮来获取数据，我创建了一个函数来设置和获取数据，但我认为它只运行setstate并在我点击两次后获取数据

 this.state = {
  page: 1,
  limit: 5,
  dataLength: '10',      
}

  render() {
    let links= []
    for (let i = 1; i <= (this.state.dataLength / this.state.limit); i++) {
        links.push(i)
}

    <h1>PAGE {this.state.page}</h1>
    { links.map((data, i) => {
    return <Button className='links' key={ i } onClick={() => this.setPage(data)}> { data }</Button>
      }) }

  setPage(data) {
   this.setState({ page: data })
   this.getData()
  }

  getData(){
   axios get localhost3000
 }

Answer 1

您需要将this.getData()作为回调传递给setState，以便仅在setState完成后触发

setPage(data) {
 this.setState({ page: data }, 
    () => { this.getData() }
  );
}

发生的事情是this.getData()在您之前的州被调用。

我建议在您的问题中添加this.getData()功能

Answer 2

永远不要在渲染方法上创建多个逻辑函数。这将使您的应用变得缓慢甚至崩溃

class MyApp extends React.Component {
   contructor() {
     this.state = {
       page: 1,
       limit: 5,
       dataLength: '10',
       link: []      
     }
   }

   componentDidMount() {
     this.paginationProcess()
   }

   setPage() {
      this.setState({ 
        page: data 
      }, () => { 
        this.getData() 
     });
   }

   paginationProcess() {
       let links= this.state.link;
       for (let i = 1; i <= (this.state.dataLength / this.state.limit); i++) {
         links.push(i)
       }
      this.setState({
        link: links
      })
   }

   render() {
     return (
        // ...
        { this.state.link.map((data, i) => {
          return <Button className='links' key={ i } onClick={() => this.setPage(data)}> { data }</Button>
        }) }
      )
   } 
}

快乐黑客...... 干杯!

分页两次点击获取数据

2 个答案: