Question

我遇到了我的代码问题，我是React的新手。我正在制作一个简单的应用程序，用户可以在其中记录锻炼我的用户个人资料页面上有一个锻炼组件，我想在用户更新他/她的锻炼日志时进行渲染。下面的代码可以解决这个问题，但遗憾的是它会在无限循环中进行渲染。我无法弄清楚如何设置此条件，因此它只会在每次更新时呈现一次。

componentDidUpdate(prevProps, prevState) {
  if (prevProps.workouts !== this.props.workouts) {
    this.props.requestUser(this.props.match.params.userId);
  }
}

用户减速机 -

const usersReducer = (state = {}, action) => {
  Object.freeze(state)
  let newState;

  switch(action.type) {
    case RECEIVE_ALL_USERS:
      newState = merge({}, state, action.users);
      return newState;
    case RECEIVE_USER:
      const member = merge({}, action.user);
      member.workouts = Object.keys(action.user.workouts)
      newState = merge({}, state, { selected: member } );
      return newState;
    case RECEIVE_WORKOUT:
      const newWorkout = merge({}, state.selected.workouts, action.workout)
      newState = merge({}, state, newWorkout);
      return newState;
    default:
      return state;
  }
}

Answer 1

你的锻炼是一个对象。您无法比较两个对象，因为它是两个不同的对象，因此这些对象不相等，这是真的。所以，你可以使用这样的东西：

componentDidUpdate(prevProps, prevState) {
  if (JSON.stringify(prevProps.workouts) !== JSON.stringify(this.props.workouts)) {
    this.props.requestUser(this.props.match.params.userId);
  }
}

这种比较是粗略的，取决于键的顺序，但应该有效，你也可以使用某种深度比较： Object comparison in JavaScript

在ComponentDidUpdate中反应无限循环

1 个答案: