Question

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

在connect（）中将console.log(state.reducer.var)作为回调时，我得到了预期的结果-var值。星期四，当console.log(var)作为将我刚分配的var传递给它的回调时，我得到了一个在console.log(state)时得到的对象。

在子组件中，我将undefined用作变量来获得props.var

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作为prop传递给我的无状态_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”参数。因此，与其在以后的函数中将component转换为Component以用作<Component />，不如在以后的return()之前完成它。像往常一样，它导致传递道具作为参数。因此，我的子组件现在可以从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);

Redux函数“连接”在无状态组件中分配了错误的状态值

2 个答案: