Question

Redux：Undefined Prop

Undefined Prop 我想从我的容器组件传递一个道具，通过道具传递到我的演示组件，但是如果没有道具未定义，我就无法做到这一点。为什么数字道具不会传递给演示组件？

使用初始stae和rootreducer创建商店：

import {createStore, applyMiddleware} from 'redux';
...
import rootReducer from './reducers/rootReducer';

const initialState = {
    multiply: 2,
    number: 1
}

export const store = createStore(
    ...initialState, 
    rootReducer, 
    applyMiddleware(logger(), thunk),
    window.devToolsExtension && window.devToolsExtension()
);

用于乘法动作和除法动作的减速器：

const multiplyReducer = (state = {}, action) => {
    switch (action.type) {
        case 'MULTIPLY':
            return state = {
                ...state,
                number: state.number * action.payload
            }
        case 'DIVIDE':
            return state = {
                ...state,
                number: state.number / action.payload
            }
        default:
            return state;
    }
}

export default multiplyReducer;

Root reducer：

import {combineReducers} from 'redux';
import multiplyReducer from './multiplyReducer';

const rootReducer = combineReducers({
  multiply: multiplyReducer
});

export default rootReducer;

将应用程序包装在提供程序中：

import Multiplier from './ContainerComponents/Multiplier';
import { BrowserRouter, Route } from 'react-router-dom';

const App = ({ store }) => (
    <BrowserRouter>
        <Route path="/" exact component={Multiplier}/>
    </BrowserRouter>
);

export default App;

行动：

export const multiplyAction = {
    type: 'MULTIPLY',
    payload: 2
}

export const divideAction = {
    type: 'DIVIDE',
    payload: 2
}

容器组件：

    import MultiplierDisplay from '../StyleComponents/MultiplierDisplay';
    import {connect} from 'react-redux';
    import {multiplyAction, divideAction} from '../Redux/actions/multiplyActions';

    class Multiplier extends React.Component {

        render() {

            return (<MultiplierDisplay {...this.props} />)
        }
    };

    const mapStateToProps = (state) => {
        return {multiply: state.multiply, number: state.number}
    };

    const mapDispatchToProps = (dispatch) => {
        return {
            handleClick: (event) => {
                dispatch(multiplyAction)
            },
            handleClick2: (event) => {
                dispatch(divideAction)
            }
        }
    }

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

演示组件：

const MultiplierDisplay = (props) => {

        return (
            <div
                className="top"
                style={{
                alignContent: 'center',
                justifyContent: 'center'
            }}>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo"/>
                        <h1 className="App-title">Welcome to React</h1>
                    </header>
                </div>
                <h1 style={{
                    marginLeft: 20
                }}>
                    Multiply the count:
                </h1>
                <p style={{
                    fontSize: '3em'
                }}>
                    Count: {props.number}
                </p>
                <button
                    style={{
                    marginLeft: 100,
                    width: '20%',
                    height: '20%'
                }}
                    onClick={props.handleClick}
                    title="Multiply">
                    Multiply
                </button>
                <button
                    style={{
                    marginLeft: 50,
                    width: '20%',
                    height: '20%'
                }}
                    onClick={props.handleClick2}
                    title="Divide">
                    Divide
                </button>
            </div>
        )
    }

    export default MultiplierDisplay;

Answer 1

您的道具编号未传递到演示文稿组件，因为您没有从容器中传递它，

class Multiplier extends React.Component {

    render() {

        return (<MultiplierDisplay/>)   // this is where you are not passing it down
    }
};

如果您需要将所有道具传递给MultiplierDisplay组件，您可以编写

class Multiplier extends React.Component {

    render() {

        return (<MultiplierDisplay {...this.props}/>)
    }
};

或者如果您想要将选定的道具传递下来，可以像

一样编写它们

class Multiplier扩展了React.Component {

    render() {
        const { multiply, number, handleClick, handleClick2 } = this.props;
        return (<MultiplierDisplay multiply={multiply} number={number} handleClick={handleClick} handleClick2={handleClick2}/>)
    }
};

此外，您需要从state.multiple获取状态，并将multiplierReducer乘以multiply

const mapStateToProps = (state) => {
    return {multiply: state.multiply.multiply, number: state.multiply.number}
};

const mapDispatchToProps = (dispatch) => {
    return {
        handleClick: (event) => {
            dispatch(multiplyAction)
        },
        handleClick2: (event) => {
            dispatch(divideAction)
        }
    }
}

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

Answer 2

您可以将以下内容用于您的代码

 const mapStateToProps = (state) => {
        return {multiply: state.multiply.multiply, number: state.multiply.number}
    };

Answer 3

如果您将状态映射到Multiplier组件的道具，则会出现问题，如在combineReducer中编写的那样，您已添加乘以作为multiplyReducer的州名称因此，在mapStateToProps函数中，您需要通过以下代码访问multiplyReducer州：

const mapStateToProps = (state) => {
    return {multiply: state.multiply.multiply, number: state.multiply.number}
};

谢谢，我希望这会有所帮助。

Redux：道具未定义

3 个答案: