在 react 组件中显示 redux 状态变化时出现的问题

Question

对原始帖子的更新：我意识到问题在于Redux状态下的更新（WaitingRoom组件的道具）以某种方式将组件的整个状态设置为其初始状态。因此，“showmatchingwindow”也被设置为false。最初，在调度MATCHING_REQUEST并将“加载”设置为 true 后，WaitingRoom 组件的状态仍保持不变。但是，在调度MATCHING_SUCCESS并且“加载”变为假并且更新了Redux状态中的“buddy”和“chatid”之后，WaitingRoom状态中的所有字段都以某种方式重置为其初始值。这很奇怪，在我的其他 Redux 操作中没有发生。我想知道是否有人可以帮助我解释导致这种情况的原因。非常感谢您的耐心和您可以提供的任何帮助！

链接到Github存储库：https://github.com/liu550/salon_project（WaitingRoom组件位于src/components/waitingroom中.js

以下是原始帖子///

我正在为我的网站构建一个随机匹配功能。以下是简要说明：我希望在成功匹配2个用户后弹出一个聊天窗口。在我的 Redux 状态中，我有 （1） “加载”，（2） “buddy”表示与当前用户匹配的用户 ID，以及 （3） “chatid”表示存储 2 个用户之间聊天历史记录的 firestore 文档的 ID。startMatching Redux 操作在 WaitingRoom 组件中调用，该组件是一个网页，除了具有匹配按钮外，还显示其他用户的配置文件。聊天窗口是MingingWindow组件，它需要一个聊天id作为其道具来呈现2个用户之间的相应聊天记录。

我确信我的 Redux 操作工作正常，但在将更新的 Redux 状态传递给我的 React 组件时遇到了问题。以下是我尝试过的2种方法：

方法 1：在 WaitingRoom 组件返回的模式内显示聊天窗口。如您所见，我在这里所做的只是条件渲染。但是，通过这种方法，模式以某种方式迅速出现不到一秒钟，然后与用户选择其性别偏好的先前模式一起消失。检查Waitroom组件的道具，我发现“buddy”和“chatid”确实更新了。难道不应该渲染MingWindow吗？我也尝试过只把成功>而不是MingingWindow组件，结果是一样的。

方法1（等候室）

class WaitingRoom extends Component {

    state = {

      ......

    }

    showMatching = (e) => {

      e.preventDefault();

      this.setState({

        showmatching: true

      })

    }

    handleMatching = (e) => {

      e.preventDefault();

      this.props.startMatching(this.props.auth.uid, this.props.profile, this.props.profile.gender, this.state.genderpreference);

      this.setState({

        showmatchingwindow: true

      })

    }

    closeMatching = () => {

      this.setState({

        showmatching: false

      })

    }

Answer 1

首先，我认为你不需要在这里使用任何内部状态。如果您知道多个组件必须共享相同的变量，并且它们不是分层的，则只需使用存储并使用应用程序状态即可。其次，我认为在你的化简器中，你可能会指向相同的初始状态并直接改变它（违反redux规则）。简而言之，由于浅复制，您的状态可能指向相同的旧初始状态对象，因此您的 react 组件未检测到更改。在返回新状态之前，请尝试在 redux reducer 中创建初始状态的深层副本（而不是浅副本）。这些链接讨论了这些概念：https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns当存储状态更改时，React 组件未更新最后，初始状态下的好友不应该是空数组而不是字符串吗？

Answer 2

您似乎正在使用函数来返回组件：// main.jsconst WaitingRoomPage = () => {&nbsp; return <WaitingRoom />;};...<Route path='/waitingroom' component={WaitingRoomPage} />我不认为你应该这样做，因为每次重新渲染Main都会导致你继续重新安装（从而重新初始化）。你的不是一个功能组件，即使它是，你仍然应该使用更简单的方式来声明带有属性的：WaitingRoomWaitingRoomRoutecomponent<Route path='/waitingroom' component={WaitingRoom} />