如何一次又一次停止渲染中的函数

Question

I am new to react, I am getting data from redux, first, I get an object from accounts from redux, then I pass this to the function in redux and set a value in numReg in the reducer.

When I call a function by this.props.fetchAccountDetail(data) in actions its send a request to API and fetch the data from API and save it in reducer or store. When i call function in render by this.getDataFromAccount(accountDetail.num) , it goes in infinite loop .

I want data in a return, it should only run one time.

import React, { Component } from 'react'
import { fetchAccountDetail, } from '../../../actions'

class myclass extends Component {
  state = {
    num : ''
  };

  getAccounts = (data) => {
    if (!data) { return; }
    return data.find(item => item.id == this.props.match.params.id);
  }

   getDataFromAccount = (data) => {
      this.props.fetchAccountDetail(data); 
      // This is a api , which provide the result agaisnt 
      // a num and set value in numReg in reducer
   }

  render() {
    const { accounts, numReg } = this.props;
    const accountDetail = this.getAccounts(accounts);
    // Here i will get a match object like  {id :1 , num :12345}

    const test=this.getDataFromAccount(accountDetail.num)
    // When i call this , it stucks in infinite loop , how can i get data only once when it render

    console.log(test)       

    return (
      <div />
    );
  }
}

const mapStateToProps = state => {
  return { accounts : state.accounts.accounts | [{id :1 , num :12345} , {id :2 , num :535234}],
    numReg : state.accounts.numReg  
    //Is a object containg the information of num from accounts
  }
}

export default (compose(
  withStyles(styles),
  connect(mapStateToProps, { fetchAccountDetail,}))(myclass));

It should return data in variable test after fetching data from redux.

Answer 1

You should never call data fetching functions or functions which alter the state within render.

Render may be called multiple times if a parent rerenders or just its internal state changes. Calling fetchAccountDetails in render updates the redux store. Redux will pass the new but equal data as props into your component.

That Component will rerender because its props changed and will call fetchAccountDetails again => loop. Render should only display data!!

For data fetching, 2 functions exist. componentDidMount which will be called after the component is visible. That would be a good place to call your fetch.

If you need a prop to fetch the data for eg an Id of some sort (fetch data for that Id), you would use componentDidUpdate in which you compare the new id and the old id to see if you need to fetch the data again.

You should read the docs and look at some tutorials. Hope this helps.

Happy coding.

Answer 2

As Domino987 answered, you need to make use of lifecycle methods . Here's an example of how it might look:

componentDidMount() {
  const { accounts } = this.props;
  const accountDetail = this.getAccounts(accounts);
  const accountData = this.getDataFromAccount(accountDetail.num)
  this.setState({
    account: {
      accountDetail: accountDetail,
      accountData: accountData
    }
  })
}

componentDidUpdate() {
  const { accounts } = this.props;
  const accountDetail = this.getAccounts(accounts);
  const accountData = this.getDataFromAccount(accountDetail.num)
  if (this.state.account.accountData !== this.getDataFromAccount(accountDetail.num)) {
    this.setState({
      account: {
        accountDetail: accountDetail,
        accountData: accountData
      }
    })
  }
}