ReactJs：组件不从商店接收道具

Question

我有这个组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import { setInterestsSelectionCriteria } from "../../api/calls/data/ads/ads-configuration";

export class AdsConfiguration extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    console.log(
      " ~ file: AdsConfiguration.js ~ line 19 ~ AdsConfiguration ~ componentDidMount ~ this.props",
      this.props
    );
    // This throws an error
    // this.props.setInterestsSelectionCriteria is not a function
    // this.props.setInterestsSelectionCriteria([])
  }

  render() {
    return <div>test</div>;
  }
}

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

const mapDispatchToProps = {
  setInterestsSelectionCriteria,
};

export default connect(mapStateToProps, mapDispatchToProps)(AdsConfiguration);

这是在 componentDidMount 中记录的内容：

InterestsSelect.js:18  ~ file: InterestsSelect.js ~ line 19 ~ InterestsSelect ~ componentDidMount ~ this.props {}

执行操作 setInterestsSelectionCriteria 会抛出此错误：

this.props.setInterestsSelectionCriteria is not a function

由于某些奇怪的原因，该组件未连接到 store。
我无法检索商店状态。
我无法执行操作。
如您所见，这两个都没有传递给组件的道具。

应用程序是这样设置的：

store.js

从'redux'导入{createStore}；从“./reducer”导入减速器；

// ==============================|| REDUX - MAIN STORE ||============================== //

export const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

index.js

import ReactDOM from 'react-dom';

// third party
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

// project imports
import App from 'App';

// style + assets
import 'assets/scss/style.scss';
import { store } from 'store/store';

// ==============================|| REACT DOM RENDER  ||============================== //

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

App.js

import { useDispatch, useSelector } from "react-redux";

import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline, StyledEngineProvider } from "@mui/material";

// routing
import Routes from "routes";

// defaultTheme
import themes from "themes";

// project imports
import NavigationScroll from "layout/NavigationScroll";
import { apiCheckToken } from "api/calls/auth/checkToken";
import { useAxios } from "api/axiosHook";
import { useEffect } from "react";
import { actions } from "store/actions";
import cookies from "react-cookies";

// ==============================|| APP ||============================== //

const App = () => {
  const [axios, cancel] = useAxios();
  const customization = useSelector((state) => state.customization);
  const dispatch = useDispatch();
  useEffect(() => {
    try {
      if (!cookies.load("token")) throw new Error();
      (async () => await apiCheckToken({ axios }))();
      return () => cancel.cancel();
    } catch (e) {
      cookies.remove("token");
      dispatch({
        type: actions.SET_LOGGED_OUT,
      });
    }
  }, []);
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={themes(customization)}>
        <CssBaseline />
        <NavigationScroll>
          <Routes />
        </NavigationScroll>
      </ThemeProvider>
    </StyledEngineProvider>
  );
};

export default App;

Routes.js

import { useRoutes } from 'react-router-dom';

// routes
import MainRoutes from './MainRoutes';
import AuthenticationRoutes from './AuthenticationRoutes';
import config from 'config';

// ==============================|| ROUTING RENDER ||============================== //

export default function ThemeRoutes() {
    return useRoutes([MainRoutes, AuthenticationRoutes], config.basename);
}

MainRoutes

import MainLayout from "layout/MainLayout";
import { ProtectedRoute } from "./ProtectedRoute";
import { AdsConfiguration } from "views/ads-configuration/AdsConfiguration";

const MainRoutes = {
  path: "/",
  element: <ProtectedRoute Component={MainLayout} />,
  children: [
    {
      path: "/ads_configuration",
      element: <AdsConfiguration />,
    },
  ],
};

export default MainRoutes;

Answer 1

将其映射到 dispatch 函数

const mapDispatchToProps = dispatch => ({
   setInterestsSelectionCriteria: (e) => dispatch(setInterestsSelectionCriteria(e))
});

参考：https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-a-function

Answer 2

您正在导出组件的连接版本和未连接版本，然后导入未连接版本。已连接的是您的默认导出。

所以，做

import AdsConfiguration from "views/ads-configuration/AdsConfiguration";

ReactJs：组件不从商店接收道具

ReactJs: Component does not receive props from the store

reactjs

react-router

redux

react-redux

react-router-dom