Question

考虑这个

  componentDidMount() {
    const { currentUserId, userList } = this.props; 
    //I get these from redux' mapStateToProps function; 
    //these are not passed down as regular props.

    Mousetrap.bind(['shift+right'], () =>
      nextUser(currentUserId, userList)
    );
  }

说我的列表中有10个用户，我们从user 1开始。当我启动该应用程序时，它将从user 1到user 2； 但是，由于currentUserId的值将永远为user 1，因此它将不再适用。

我该如何避免这种情况并使参数具有动态性，以便对参数进行更新？

编辑：currentUserId和userList通过Redux传递给组件

Answer 1

如果您希望事物是动态的，请考虑将currentUserId复制到构造函数中的状态，并使用this.setState（{currentUserId：}）根据需要调整状态。示例：

constructor(props) {
  super(props);
  this.state = { currentUserId: props.currentUserId };
}

componentDidMount() {
  const { userList } = this.props;
  const { currentUserId } = this.state;

  Mousetrap.bind(['shift+right'], () =>
    nextUser(currentUserId, userList)
  );

}

我不知道您的nextUser函数如何工作，但是如果它返回下一个userId，您可以这样做：

Mousetrap.bind(['shift+right'], () =>
  this.setState({currentUserId:nextUser(currentUserId, userList)});
);

在componentDidMount（）中。

Answer 2

如果需要更新功能，则在安装组件后，需要使用 componentDidUpdate 对组件生命周期内的道具更改做出反应。

componentDidMount将被调用一次（当该组件变得可见时），并且您的函数将被设置为当前prop => onClick将选择第二个用户。

在那之后，您的道具发生了变化（currentUserId现在将成为第二个用户），但是您没有更新功能。这就是为什么它将卡在第二个用户上的原因。

要实现您的目标，可以将 componentDidUpdate 与 componentDidMount 结合使用，如下所示：

componentDidUpdate(prevProps) {
    const { currentUserId, userList } = this.props;
    if(prevProps.currentUserId !== currentUserId || prevProps.userList !== userList ) {
        Mousetrap.bind(['shift+right'], () =>
          nextUser(currentUserId, userList)
        );
    }
}

或者，您也可以从nextUser删除参数，并通过直接在化简器中设置currentUserId来让操作/化简处理更新。

希望这会有所帮助。编码愉快。

如何动态调用componentDidMount中的函数？

2 个答案: