Reactjs MapStateTops don'；不要给道具送任何东西

我有一个组件“FloatingChat”需要连接到Redux， 所以我为这个组件创建了一个容器“FloatingChatContainer”

src/containers/FloatingChatContainer.js

import { connect } from "react-redux";

import FloatingChat from "../../components/FloatingChat";

const mapStateToProps = (state, props) => ({
  auth: state[props.auth],
  errors: state[props.errors]
});

const FloatingChatContainer = connect(mapStateToProps)(FloatingChat);

export default FloatingChatContainer;

但是，在FloatingChat组件中，我有一个错误：

TypeError: Cannot read property 'isAuthenticated' of undefined

  useEffect(() => {
    console.log("props ", props);
    if (props.auth.isAuthenticated) {
      loadUser();
    }
  }, []);

控制台日志返回一个空对象，因此我的道具不会到达组件中

---

有人帮忙吗？

在没有看到更多项目的情况下，很难回答你所在州的情况。不过，我会看看几个不同的潜在罪犯：

确保您的组件通过

构造函数（props）

+

super（props）

接收道具

将记录器中间件添加到应用程序中，以便更好地跟踪状态/调试错误。你可以看看记录器

向react组件添加一个

componentDidMount（）

方法

---

您实际使用的是组件的连接版本吗？我见过很多人不小心导入并使用了“普通”版本。你能解释一下为什么要在

mapstatetops

中执行

auth:state[props.auth]，

而不仅仅是

auth:state.auth

？对于

auth:state[props.auth]，

要有意义，您需要使用自己的

auth

prop来呈现

FloatingChatContainer

，它是

state

中的键的名称，映射到您所关心的

auth

状态，看起来很混乱，或者至少是非正统的。您好，在它工作之前，因为我在组件中执行了mapStateToProps和connect，但有人告诉我这不好，我必须分离组件并使其成为一个容器。。我在statehello中有一个具有isAuthenticated属性的reducer，我使用的是带挂钩的功能组件，所以我没有构造函数、super和componentDidMount:）嘿！react挂钩的最佳实践是不使用容器。丹·阿布拉莫夫在他的更新中对此进行了讨论。另外，还有关于集成react钩子的redux文档-希望有帮助！