Question

大家好，所以我首先要筛选的是“聊天室”，其次是“聊天”。

在第一个屏幕中，我有一个聊天通道，我在其中选择一个，然后转到第二个屏幕，在该屏幕上我实际上是在聊天。在第二个屏幕中，我使用componentWillReceiveProps进行graphql订阅。一切正常，直到我使用this.props.navigation.goBack()为止，如果我返回了消息，则发送邮件，但再也不会调用componentWillReceiveProps。

componentWillReceiveProps(nextProps) {
    console.log('I am here')
    if (nextProps.data !== undefined && !nextProps.data.loading) {
      let { subscribeToMore } = this.props.data;
      subscribeToMore({
        document: MESSAGE_ADDED_SUBSCRIPTION,
        updateQuery: (previousResult, { subscriptionData }) => {
          if (!subscriptionData.data) {
            return previousResult;
          }

          const newMessage = subscriptionData.data.messageAdded;

          if (
            previousResult.getMessagesForThisChannel[0] === undefined ||
            previousResult.getMessagesForThisChannel[0].channel._id ===
              newMessage.channel._id
          ) {
            if (
              !previousResult.getMessagesForThisChannel.find(
                n => n._id === newMessage._id
              )
            ) {
              return {
                ...previousResult,
                getMessagesForThisChannel: [
                  { ...newMessage },
                  ...previousResult.getMessagesForThisChannel
                ]
              };
            }
          }

          return previousResult;
        },
        onError: err => console.log(err)
      });
    }
}

Answer 1

无论出于何种原因，默认情况下，this.props.navigation.goBack()不会触发Redux状态的任何更改，这就是不刷新道具的原因。您可以做的是在调用this.props.navigation.goBack()的函数旁边触发一些附加逻辑（一个操作），以通知redux发生了更改。如果您根本没有任何数据更改，只需简单地创建任何化简器的克隆（使用映射，散布等）并将其返回即可。那应该刷新你的道具。

Answer 2

一种方法是使用react-navigation willFocus事件，您可以在componentWillMount方法中将事件附加到组件内部：

componentWillMount()
  this.props.navigation.addListener(
    'willFocus', () => {
      // do what ever you'd like here...
    }
  );
}

然后，当您的组件再次重新聚焦在屏幕上时，它的行为将与componentWillReceiveProps所期望的一样。

在goBack（）

2 个答案: