Question

我正在尝试访问redux状态，但是我还需要从路由传递过来的道具。

示例为：我需要道具

const DefaultLayout = props => {
    return (
        <div>

        </div>
    )
}

因为

<Route
   path="/"
   name="Home"
   render={props => <DefaultLayout {...props} />}
/>

当我添加Redux状态，例如： {auth：{user}} 来访问用户数据时，它不起作用。

const DefaultLayout = (props , {auth: {user}}) => {
    return (
        <div>

        </div>
    )
}

...

DefaultLayout.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps)(DefaultLayout);

如果我删除该道具，我会得到路径名错误，有任何解释和帮助吗？新来的。

Answer 1

const DefaultLayout = (props , {auth: {user}}) => {

组件只需传递一个变量：props。如果要访问auth.user，可以在props.auth.user上找到它。 mapStateToProps与connect

合作将其放置在此处

const DefaultLayout = (props) => {
  const { location, history, match, auth } = props;
  return (
    <div>
      // something with the variables 
    </div>
  )
}

const mapStateToProps = state => ({
  auth: state.auth
})
export default connect(mapStateToProps)(DefaultLayout);

Answer 2

我认为您需要通过以下方式访问道具：

const DefaultLayout = ({auth, location, history, ...otherProps}) => {
//example : console.log(otherProps.match);
    return (
        <div>
            {auth.user}
        </div>
    )
}

Route组件传递的道具与redux添加的道具合并。

在组件中同时使反应通过props和redux状态

2 个答案: