reactjs - 在 componentWillReceiveProps 中调度时无限循环

Question

我有一个由react-router (path="profile/:username") 加载的Profile 组件，该组件本身如下所示:

...
import { fetchUser } from '../actions/user';

class Profile extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const { username } = this.props;
    this.fetchUser(username);
  }
  componentWillReceiveProps(nextProps) {
    const { username } = nextProps.params;
    this.fetchUser(username);
  }
  fetchUser(username) {
    const { dispatch } = this.props;
    dispatch(fetchUser(username));
  }
  render() {...}
}

export default connect((state, ownProps) => {
  return {
    username: ownProps.params.username,
    isAuthenticated: state.auth.isAuthenticated
  };
})(Profile);

fetchUser 操作如下所示(redux-api-middleware):

function fetchUser(id) {
  let token = localStorage.getItem('jwt');
  return {
    [CALL_API]: {
      endpoint: `http://localhost:3000/api/users/${id}`,
      method: 'GET',
      headers: { 'x-access-token': token },
      types: [FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE]
    }
  }
}

我添加 componentWillReceiveProps 函数的原因是当 URL 更改为另一个 :username 时使用react并加载该用户的个人资料信息。乍一看一切似乎都正常，但后来我在调试时注意到 componentWillReceiveProps 函数在无限循环中被调用，我不知道为什么。如果我删除 componentWillReceiveProps，则配置文件不会使用新用户名进行更新，但不会出现循环问题。有什么想法吗？

Answer 1

尝试添加一个条件来比较 Prop 。如果您的组件需要它。

componentWillRecieveProps(nextProps){
 if(nextProps.value !== this.props.value)
  dispatch(action()) //do dispatch here 
}