ReactJs mapStateToProps

Question

我的反应出了点问题。我正在尝试验证用户，并从我的后端获取一些数据，而mapStateToProps是一个小问题。这就是我如何成功地获得唯一的用户：

 const mapStateToProps = ({auth}) => {
  const {authUser} = auth;
  return {authUser}
};

这就是我从api中获取数据的方法，也成功了

const mapStateToProps = (state) => {
  return {
    serversList: state.servers.servers,
  }
}

现在我需要以某种方式组合这个mapStateToProps，我尝试了不同的方法，比如：

 const mapStateToProps = ( state, auth ) => {
        const {authUser} = auth;
        return {
            authUser,
            serversList: state.servers.servers,
        }
    };

在这种情况下，它不对用户进行身份验证。如何将它们结合起来？

这是我的完整代码，没有一些导入：

import { requestServers  } from '../../../appRedux/actions';

const mapStateToProps = ( state, auth ) => {
    const {authUser} = auth;
    return {
        authUser,
        serversList: state.servers.servers,
    }
};


const mapDispatchToProps = (dispatch) => {
return {
  onRequestServers: () => dispatch(requestServers())
}
}


class Dashboard extends Component {


    componentDidMount() {
        this.props.onRequestServers();
      }


    render() {
        const {authUser} = this.props;
        const { serversList } = this.props;


        return (
            <Row>
        <Col xl={12} lg={24} md={12} sm={24} xs={24}>
        <UserInfo userName={authUser ? authUser.name : "Guest"}/>
        </Col>
        <Col xl={12} lg={24} md={12} sm={24} xs={24}>
          <BillingProfile balance={authUser ? authUser.stanje : "0"}/>
        </Col>
            <Col span={24}>
            <Servers />
            </Col >
            </Row>

        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

Answer 1

它应该是

const mapStateToProps = (state) => {
    const {authUser} = state.auth;
    return {
        authUser,
        serversList: state.servers.servers,
    }
};

或

const mapStateToProps = ({servers, auth}) => {
    const {authUser} = auth;
    return {
        authUser,
        serversList: servers.servers,
    }
};

身份验证的第二个参数是ownProps，而不是mapStateToProps。您需要的是从state中提取的auth。

Answer 2

试一试

const mapStateToProps = ({ auth, servers }) => ({
  authUser: auth.authUser,
  serversList: servers.servers,
});