Reactjs 反应重复调度

调用分派以获取React组件的初始数据的最佳方法是什么。我的理解是在渲染之前调用ComponentWillMount。所以理论上如果我调用ComponentWillMount上的dispatch，当我点击render和ComponentDidMount时，我应该在组件的道具中有我的数据，对吗？我没看到

我看到render被调用了两次，并且在初始化组件的第一步，我无法访问props中的数据。看起来在第二次渲染之前，实际上不会调用dispatch。基本上，我希望在最初设置组件时，能够了解调用分派的最佳方式。我基本上是在做下面的事情，我使用一个容器组件从dispatch获取数据，然后将其作为道具传递给一个子组件。但是我还想初始化ContainerComponent中的一些状态变量，然后将它们作为道具传递给ChildComponent。问题是，我想要初始化的状态变量取决于分派返回的数据，理想情况下，我会在ComponentWillMount或ComponentDidMount中进行初始化

import React from 'react';
import axios from 'axios';

import { connect } from 'react-redux';
import ChildComponent from './ChildComponent.js';

import { getTransactionsAll } from '../actions/actions.js';

class ContainerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      acctList:[],
      acctChecked:[],
      categoryList:[]
    }
}
  componentWillMount() {

    console.log("componentWillMount entered");

    this.props.get_data();
    console.log(this.props.searchProps.transactions_all);//this is undefined meaning the dispatch has not assigned the data yet...??

  }

  componentDidMount() {
    console.log("componentDidMount entered");
    console.log(this.props.searchProps.transactions_all);//this is undefined meaning the dispatch has not assigned the data yet...??
}

  render() {

    console.log("TransactionManagerContainer render entered");
    console.log(this.props.searchProps.transactions_all);//this is undefined the first time around meaning the dispatch has not assigned the data yet...??, but is defined on the second call to render after the dispatch has actually occurred...

return <ChildComponent
             data={this.props.searchProps.data}/>;
}

const mapStateToProps = (state) => ({
  searchProps: state.searchProps
});

export default connect(mapStateToProps, {getTransactionsAll})(TransactionManagerContainer);

以下是我的行动：

import axios from 'axios';

export const GET_TRANSACTIONS = 'GET_TRANSACTIONS';

export function getTransactions(year) {
 return function(dispatch) {
  axios.get(`http://localhost:3001/api/transfilter?year=${year}&grouping=2`)
   .then(response => {
     dispatch({
       type: GET_TRANSACTIONS,
       payload: response.data,
       selectedYear: year
     });
   })
   .catch((error) => {
     console.log(error);
   })
 }
}

export const GET_TRANSACTIONS_ALL = 'GET_TRANSACTIONS_ALL';

export function getTransactionsAll(year) {
 return function(dispatch) {
  axios.get(`http://localhost:3001/api/trans?limit=20`)
   .then(response => {

     dispatch({
       type: GET_TRANSACTIONS_ALL,
       payload: response.data
     });
   })
   .catch((error) => {
     console.log(error);
   })
 }
}

---

我相信你的主要问题是：

调用分派以获取React组件的初始数据的最佳方法是什么

获取初始数据请求（或一般的任何AJAX请求）应该进入

componentDidMount

生命周期事件

这有几个原因，以下是两个重要原因：

作为React协调算法的下一个实现，光纤将能够根据需要启动和停止渲染，以提高性能。其中一个折衷是componentWillMount是另一个生命周期事件，在这个事件中发出AJAX请求可能是有意义的，它将是“不确定的”。这意味着React可能会在需要时随时开始调用componentWillMount。对于AJAX请求来说，这显然是一个糟糕的公式

您不能保证AJAX请求在组件装载之前不会得到解决。如果它这样做了，那就意味着您将试图在一个未安装的组件上设置state，这不仅不起作用，而且React会对您大喊大叫。在componentDidMount中执行AJAX将保证有一个组件需要更新

学分：我从中学到的，还有一个讨论

然后，你提出了很多小问题，我很难回答所有问题，但我会尽量涵盖大部分问题：

• 阅读上述内容后，您现在应该了解为什么数据在

  componentWillMount

  和

  componentDidMount

  中未定义。那仅仅是因为数据还没有到达
• 在组件的第一次渲染期间，数据未定义是正常的。初始渲染发生在数据到达之前
• 在第二次渲染期间定义数据是正常的。

  dispatch

  触发异步数据获取。在数据到来之后，一个

  减速机被命中，组件被重新渲染（这是第二次重新渲染）

• 如果主组件中的子组件需要数据，请检查父级

  render

  方法（如果数据存在），仅当数据存在时才有条件地传递内部组件。像这样：

  class ContainerComponent extends React.Component {
    // ... omitted for brevity
  
    render() {
      return (
        { this.props.searchProps.data ?
            <ChildComponent
              data={this.props.searchProps.data} />
            : <p>Loading</p>
        }
      );
    }
  }
  

  class ContainerComponent扩展了React.Component{
  //…为简洁起见省略
  render（）{
  返回(
  {this.props.searchProps.data？
  ：加载
  
  }
  );
  }
  }
  

---

我相信你的主要问题是：
调用分派以获取React组件的初始数据的最佳方法是什么
获取初始数据请求（或一般的任何AJAX请求）应该进入

componentDidMount

生命周期事件
这有几个原因，以下是两个重要原因：
• 作为React协调算法的下一个实现，光纤将能够根据需要启动和停止渲染，以提高性能。其中一个折衷是componentWillMount是另一个生命周期事件，在这个事件中发出AJAX请求可能是有意义的，它将是“不确定的”。这意味着React可能会在需要时随时开始调用componentWillMount。对于AJAX请求来说，这显然是一个糟糕的公式

• 您不能保证AJAX请求在组件装载之前不会得到解决。如果它这样做了，那就意味着您将试图在一个未安装的组件上设置state，这不仅不起作用，而且React会对您大喊大叫。在componentDidMount中执行AJAX将保证有一个组件需要更新

学分：我从中学到的，还有一个讨论
然后，你提出了很多小问题，我很难回答所有问题，但我会尽量涵盖大部分问题：
• 阅读上述内容后，您现在应该了解为什么数据在

  componentWillMount

  和

  componentDidMount

  中未定义。那仅仅是因为数据还没有到达
• 在组件的第一次渲染期间，数据未定义是正常的。初始渲染发生在数据到达之前
• 在第二次渲染期间定义数据是正常的。

  dispatch

  触发异步数据获取。在数据到来之后，一个

  减速机被命中，组件被重新渲染（这是第二次重新渲染）

• 如果主组件中的子组件需要数据，请检查父级

  render

  方法（如果数据存在），仅当数据存在时才有条件地传递内部组件。像这样：

  class ContainerComponent extends React.Component {
    // ... omitted for brevity
  
    render() {
      return (
        { this.props.searchProps.data ?
            <ChildComponent
              data={this.props.searchProps.data} />
            : <p>Loading</p>
        }
      );
    }
  }
  

  class ContainerComponent扩展了React.Component{
  //…为简洁起见省略
  render（）{