Redux 函数"connect"在无状态组件中分配错误的状态值

Question

我正在尝试将一些道具传递给有条件渲染需求的无状态组件。当将redux状态值分配给我的 connect()中的变量时，例如 var: state.reducer.var，我没有得到" state.reducer.var"对象。相反，我得到了整个状态对象。

当COC_3在Connect((中作为回调时，我会得到我的预期结果-VAR值。当console.log(var)作为回调将我的刚分配的var传递给它时，我会得到一个 console.log(state)时会得到的对象。

在我的孩子组件中，我使用我的var作为 props.var

获得 undefined

const _ProtectedRoute = ({ component: Component, ...rest }, props) => {
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...rest} />
      }
    </Fragment>
  );
}
const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }, (isAuthed) => {console.log('state value: ', isAuthed)})
)(_ProtectedRoute);

我希望我分配了redux状态的var将被传递给我的无状态_ProtectedRoute组件，以便我可以在条件语句中使用它。

Answer 1

您正在做正确的事情，它应该按预期工作，但我确实注意到您的代码中的语法问题，第一个参数中的卷曲括号之后应该有一个闭合括号，也应该是第二个参数应返回一个对象，例如

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }), (dispatch) => ({
      printAuth:(isAuthed) => {console.log('state value: ', isAuthed)}
  })
)(_ProtectedRoute);

Answer 2

我对函数参数的缺乏知识是问题。我的connect()功能确实是功能功能(应该工作的(。我的孩子组成部分的道具存在问题。 ({ component: Component, ...rest })已经是"道具"。({ component: Component, ...rest }, props)意味着我分配了另一个未定义的" props"参数。因此，稍后应该在return()之前将component转换为Component以用作<Component />的CC_14。它像往常一样导致通过道具作为论点。因此，我的孩子组件现在可以作为mapStateToProps()的道具接收Redux状态。

P.S。少数人提到的是，connect()中的控制台可以是错误的，因为它不是回调。

const _ProtectedRoute = props => {
  const Component = props.component;
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...props} />
      }
    </Fragment>
  );
}
const mapStateToProps = (state) => ({
  isAuthed: state.user.isAuthed
});
const ProtectedRoute = connect(mapStateToProps, null)(_ProtectedRoute);