获取辅助方法以在初始状态更新时运行

Question

我的目标是让 autoPagination 函数在 this.props.userSaves 最初更新状态时运行。 在我的程序中，它以一个空数组开始，并在初始化时将 100 个对象存储在数组中。 问题是 autoPagination 在对象被存储之前运行，因此 while 循环没有运行。 我已经使用 setTimeout 解决了这个问题，但我并不认为这是一个长期的解决方案。 有任何想法吗？

以下代码嵌套在基于类的组件中。

  autoPagination = async token => {
    while (this.props.userSaves.length > 0) {
      const { userSaves } = this.props
      const lastPage = userSaves[userSaves.length-1].data.name

      const userSavesObject = await axios.get (`https://oauth.reddit.com/user/${this.props.username}/saved/.json?limit=100&after=${lastPage}`, {
      headers: { 'Authorization': `bearer ${token}` }
    })
      const currentPageSaves = userSavesObject.data.data.children
      this.props.storeUserHistory(currentPageSaves)
      this.props.appendUserHistory(currentPageSaves)
    }
  }

完整组件（自请求以来）：

import axios from 'axios';
import React from 'react';
import { connect } from 'react-redux';
import { storeUserHistory, appendUserHistory, storeInitialData } from '../actions/index.js'

class ListSaved extends React.Component {
  componentDidMount (props) {
    const params = new URLSearchParams(this.props.location.hash);
    const token = params.get('#access_token')
    this.props.storeInitialData(token)

    setTimeout(() => {
      this.autoPagination(token);
    }, 3000)
  }

  autoPagination = async token => {
    while (this.props.userSaves.length > 0) {
      const { userSaves } = this.props
      const lastPage = userSaves[userSaves.length-1].data.name

      const userSavesObject = await axios.get (`https://oauth.reddit.com/user/${this.props.username}/saved/.json?limit=100&after=${lastPage}`, {
      headers: { 'Authorization': `bearer ${token}` }
    })
      const currentPageSaves = userSavesObject.data.data.children
      this.props.storeUserHistory(currentPageSaves)
      this.props.appendUserHistory(currentPageSaves)
    }
  }

  renderPostTitles = () => {
    return this.props.totalSaves.map((saved) => {
      return (
        <div key={saved.data.id}>
          <div>{saved.data.title}</div>
        </div>
      )
    })
  }

  render () {
    return <div>{this.renderPostTitles()}</div>
  }
}

const mapStateToProps = state => {
  console.log(state)
  return { 
    username: state.username,
    userSaves: state.userHistory,
    totalSaves: state.totalUserHistory
   }
}

export default connect(mapStateToProps, { storeUserHistory, appendUserHistory, storeInitialData })(ListSaved);

Answer 1

取一个变量并最初将其设置为 true.. 当您在 props 中获取数据时运行该函数并使变量为 false 以便它不会再次运行..

constructor (props)
{
   super(props)
   this.myvar = true
}

componentWillRecieveProps(nextProps)
{
    if(this.myvar)
    {
         if(check if get your data)
           {
               // run your function 
              this.myvar= false
          }
     }
}

Answer 2

更正的组件。 每次组件更新时都会运行该函数。 组件在安装后第一次更新

 import axios from 'axios'; import React from 'react'; import { connect } from 'react-redux'; import { storeUserHistory, appendUserHistory, storeInitialData } from '../actions/index.js' class ListSaved extends React.Component { componentDidMount (props) { const params = new URLSearchParams(this.props.location.hash); const token = params.get('#access_token') this.props.storeInitialData(token) } componentDidUpdate (props) { this.autoPagination(token); } autoPagination = async token => { while (this.props.userSaves.length > 0) { const { userSaves } = this.props const lastPage = userSaves[userSaves.length-1].data.name const userSavesObject = await axios.get (`https://oauth.reddit.com/user/${this.props.username}/saved/.json?limit=100&after=${lastPage}`, { headers: { 'Authorization': `bearer ${token}` } }) const currentPageSaves = userSavesObject.data.data.children this.props.storeUserHistory(currentPageSaves) this.props.appendUserHistory(currentPageSaves) } } renderPostTitles = () => { return this.props.totalSaves.map((saved) => { return ( <div key={saved.data.id}> <div>{saved.data.title}</div> </div> ) }) } render () { return <div>{this.renderPostTitles()}</div> } } const mapStateToProps = state => { console.log(state) return { username: state.username, userSaves: state.userHistory, totalSaves: state.totalUserHistory } } export default connect(mapStateToProps, { storeUserHistory, appendUserHistory, storeInitialData })(ListSaved);