时间戳

首页 > 解决方案 > 未调用 mapStateToProps 方法

reactjs - 未调用 mapStateToProps 方法

问题描述

出于某种原因，我的“secondComponent”实际上根本没有调用 mapStateToProps，即使其中有一个 console.log()，我实际上很困惑为什么会这样。Redux 与我的“App”组件完美配合，但没有在子组件中调用 mapStateToProps，它就被蒙在鼓里了。

希望有人可以在这里帮助我！

1：Index.tsx，我确实确保有一个商店的提供者。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { Provider } from 'react-redux';
    import configureStore from './store';

    const store = configureStore;

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

2：我的“应用程序”组件与 redux 商店一起使用没有问题。

    import * as React from 'react';
    import { connect } from 'react-redux';
    import { addItemToCart, removeItemFromCart } from './store/cart/actions';

    import { Button, Grid } from 'semantic-ui-react';
    import { RootState } from './store';
    import { SecondComponent } from './components/SecondComponent';

    export interface IAppProps {
      addItemToCart: typeof addItemToCart,            
      removeItemFromCart: typeof removeItemFromCart, 
      userId: number,           
      selectedItems: number[]  
    }

    export class App extends React.Component<IAppProps> {
      onClickAdd() {
        this.props.addItemToCart(5);
      }

      public render() {
        return (
          <Grid centered>
            <SecondComponent/>
          </Grid>
        );
      }
    }

    const mapStateToProps = (state: RootState) => {
      return {
       userId: state.cart.userId,
        selectedItems: state.cart.selectedItems
      };
    }

    export default connect(
      mapStateToProps, 
      { addItemToCart, removeItemFromCart } 
    )(App);

3：第二个组件根本没有调用“mapStateToProps”。:(

    import * as React from 'react';
    import { RootState } from '../store';
    import { connect } from 'react-redux';
    import { addItemToInventory, removeItemFromInventory } from '../store/inventory/actions';
    import { Item, ItemTypesAvaliable } from '../store/inventory/types';
    import { Fragment } from 'react';
    import ItemTypeSection from './ItemTypeSection';
    import { Grid } from 'semantic-ui-react';

    export interface ISecondComponentProps{
        removeItemFromInventory?: typeof removeItemFromInventory,
        addItemToInventory?: typeof addItemToInventory,
        items?: Item[],
        itemTypesAvaliable?: ItemTypesAvaliable[]
    }

    export class SecondComponentextends React.Component<ISecondComponentProps> {
        public render() {
            let { itemTypesAvaliable } = this.props;
            console.log(this.props);

            return (
               <Grid>
                    ok?
                    {itemTypesAvaliable != null ? itemTypesAvaliable.map(individualItemType => {
                        return <ItemTypeSection itemType={individualItemType} />
                    }) : <h1>doesn't work</h1>}
                </Grid>

            );
        }
    }

    const mapStateToProps = (state: RootState) => {
        console.log(state);
        console.log("no???")
        return {
            // items: state.inventory.items,
            // itemTypesAvaliable: state.inventory.itemTypesAvaliable
        };
    }

    export default connect(
        mapStateToProps, 
        { addItemToInventory, removeItemFromInventory }
    )(SecondComponent);```

标签： reactjsreact-redux

解决方案

请确保您正在导入所需的实例。SecondComponent在您的情况下，您需要带有代码的 redux 连接实例

Right:
import SecondComponent from <pathToSecondComponentFile>

这是通过产生

export default connect(
        mapStateToProps, 
        { addItemToInventory, removeItemFromInventory }
    )(SecondComponent);

如果您要像这样导入组件

Wrong:
import {SecondComponent} from "<pathToSecondComponentFile>"

那么请移除 SecondComponent 的大括号以从文件中获取默认的导出实例。

推荐阅读