Question

当用户更新输入栏时，我打算对我的rest api执行提取。我遇到的问题是componentDidUpdate方法调用动作创建器，它将json调度到reducer，然后更新状态并再次调用componentDidUpdate。结束无尽循环的任何想法或最佳实践？谢谢！

行动创作者：

export const fetchFoods = (dispatch, searchText) => {
  return fetch(`/nutrition/${searchText}`)
    .then(res => res.json())
    .then(json => dispatch({type: 'RECEIVE_FOODS', json}))
}

减速机：

const foods = (state = [], action) => {
  switch (action.type) {
    case 'RECEIVE_FOODS':
      return action.json
    default:
      return state
  }
}

React Container：

const FoodList = React.createClass({
  componentDidUpdate: function() {
    fetchFoods(this.props.dispatch, this.props.searchText)
  },
  componentWillMount: function() {
    fetchFoods(this.props.dispatch, this.props.searchText)
  },
  render: function() {
    ...
  }
})

export default connect(
  (state) => {
    return {searchText: state.searchText, foods: state.foods}
  }
)(FoodList)

Answer 1

您应该从fetchFoods中删除componentDidUpdate功能。在更新时调用函数将导致像您描述的无限循环。

组件第一次安装并检索原始数据集后，您应该只在明确要求时调用该操作。如果用户更改它，另一个功能会更改它，等等。

Answer 2

将onChange（）处理程序附加到您的输入（或任何您想要触发更新的处理程序），这样无论何时输入发生更改，它都会调用一个显式调度该操作的函数。

Task.ContinueWith(Action<Task, Object>, Object, TaskContinuationOptions)

功能：

handleChange: function (e) {
    var myInput = e.target.value;
    this.setState({
        value: myInput
    });
    fetchFoods(this.props.dispatch, myInput) //sends it to the store, 
},

渲染：

render: function (){
    return( 
        <div>
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        </div>
)}

在生命周期方法中放置操作调度通常会导致这种行为。

React Redux无限循环

2 个答案: