Question

我是新来的人，我要从redux获取数据，首先，我从redux的帐户中获取一个对象，然后将其传递给redux中的函数，并在化简器的numReg中设置一个值。

当我在操作中通过this.props.fetchAccountDetail(data)调用函数时，它向API发送请求并从API提取数据并将其保存在reducer或store中。当我在渲染中调用函数时 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));

从redux获取数据后，它应该在变量test中返回数据。

Answer 1

您永远不应调用数据获取功能或会改变渲染状态的功能。

如果父母重新渲染或仅内部状态发生变化，则渲染可能会被多次调用。在渲染器中调用fetchAccountDetails会更新redux存储。 Redux会将新的但相等的数据作为prop传递到组件中。

该组件将重新渲染，因为其道具发生了变化，并将再次调用fetchAccountDetails => 循环。渲染器应该只显示数据！！

对于数据获取，存在2个功能。 componentDidMount，该组件可见后将被调用。那将是调用您的访存的好地方。

如果您需要prop来获取 eg 某种ID（获取该ID的数据）的数据，则可以使用componentDidUpdate进行比较新ID和旧ID，以查看是否需要再次获取数据。

您应该阅读文档并查看一些教程。希望这可以帮助。

快乐的编码。

Answer 2

Domino987回答时，您需要使用lifecycle methods。这是一个可能外观的示例：

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

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

2 个答案: