Question

我正在渲染＆＃34;细节＆＃34;我的UsersListContainer中的回调组件如下：

class UsersListContainer extends Component {
  goToUserById(id) {
    if (!id) { return false; }
    this.props.history.push(`/users/${id}`);
  }

  render() {
    return (
      <UserList
      goToUser={(id) => this.goToUserById(id)}/>
    );
  }
}

我的＆＃34;细节＆＃34;容器：

class UserDetailsContainer extends Component {
  componentDidMount() {
    this.props.getUserDetails(this.props.match.params.id);
  }

  render() {
    return (
      <UserDetails user={this.props.selectedUser}/>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getUserDetails: id => dispatch(getUser(id))
  };
};

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

在我的演讲＆＃34;用户＆＃34;组件我显示来自redux商店的一组数据，如下所示：

class UserDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.user.name,
      address: this.props.user.name,
      workingHours: this.props.user.workingHours,
      phone: this.props.user.phone
    };
  }

我没有直接显示组件道具而我使用状态因为它们是要编辑的。这有效，但问题是所有这些道具都没有与组件加载同时更新，这意味着当我第一次选择用户显示正确的信息时，我会切换回＆＃34; / users＆＃34;选择另一个，他的道具保持与前一个用户的道具相同。我尝试使用componentWillUnmount来清除数据，但它没有工作

Answer 1

当您实现类似/users/:id的路由时，如果您将id更改为其他内容，则不会重新装入整个组件，因此不会调用componentDidMount，而只会更改道具因此你需要实现componentWillReceiveProps功能

componentDidMount() {
    this.props.getUserDetails(this.props.match.params.id);
}

componentWillReceiveProps(nextProps) {
    if(this.props.match.params.id !== nextProps.match.params.id) {
        this.props.getUserDetails(nextProps.match.params.id);
    }
}

Answer 2

使用lodash lib解决了这个问题在我的演示组件中，我比较对象是否相等

 constructor(props) {
    super(props);
    this.state = {
      name: "",
      address: ""
    };
  }

  componentWillReceiveProps(nextProps) {
    _.isEqual(this.props.user, nextProps.user) ? (
      this.setState({
        name: this.props.user.name,
        address: this.props.user.address
      })
    ) : (
      this.setState({
        name: nextProps.user.name,
        address: nextProps.user.address,
      })
    )
  }

调用具有不同param的Route时不调用componentDidMount

2 个答案: