렌더에서 다시 호출 기능을 중지하는 방법

렌더에서 다시 호출 기능을 중지하는 방법

나는 반응하는 것이 처음이고, 나는 Redex로부터 데이터를 얻고, 먼저 Redex로부터 어떤 물체를 얻고, 그리고 나서 이것을 Redex로 함수에 전달하고, 값을 설정한다.numReg감량기에

다음에 의해 함수를 호출할 때this.props.fetchAccountDetail(data)동작에서 API에 요청을 보내고 API에서 데이터를 가져와 감량기 또는 저장소에 저장한다.렌더링 기능을 호출할 때this.getDataFromAccount(accountDetail.num)무한순환으로 흐른다.

데이터를 돌려받고 싶은데, 한 번만 실행해야 해.

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));

Redex에서 데이터를 가져온 후 변수 테스트에서 데이터를 반환해야 한다.

렌더 내에서 상태를 변경하는 데이터 가져오기 기능 또는 함수를 호출해서는 안 된다.

부모가 다시 렌더링하거나 내부 상태가 변경될 경우 렌더를 여러 번 호출할 수 있다.호출fetchAccountDetailsRedex 스토어를 업데이트한다.Redex는 새롭지만 동일한 데이터를 구성요소로 전달한다.

소품이 변경되어 해당 구성 요소가 리렌더되고fetchAccountDetails다시 => 루프.렌더에는 데이터만 표시되어야 함!!

데이터 가져오기의 경우 두 가지 기능이 있다. componentDidMount구성 요소가 표시된 후에 호출될 수 있는 기능거긴 네 물건이라고 부르기 좋은 곳이 될 거야.

만약 당신이 a가prop예를 들어, Id의 Id(Id에 대한 데이터 가져오기)에 대한 데이터를 가져오려면componentDidUpdate데이터를 다시 가져와야 하는지 여부를 확인하기 위해 새 ID와 이전 ID를 비교하십시오.

문서를 읽고 튜토리얼을 살펴보십시오.이게 도움이 되길 바래.

해피 코딩.

Domino987이 대답했듯이, 당신은 라이프사이클 방법을 사용할 필요가 있다.어떻게 보일지 예를 들어보자.

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
      }
    })
  }
}

참조URL: https://stackoverflow.com/questions/57383534/how-to-stop-function-again-and-again-calling-in-render