Question

我已经定义了Redux存储，它在测试中似乎运行良好。但是，我无法正确地将store传递给React组件的props。我正在使用CDN调用将所需的库加载到页面中，然后从一个JavaScript文件加载所有组件。

已加载的库

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/redux@4.0.1/dist/redux.js"></script>
<script crossorigin src="https://unpkg.com/react-redux@6.0.0/dist/react-redux.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

我的JavaScript库

<script src="js/reactComponents.js" type="text/babel"></script>

代码

(function () {
    "use strict";
    //DEFINE STORE - REDUX
    const { Component } = React;
    const { Provider, connect } = ReactRedux;
    //REDUX ACTIONS
    const ADD_RESOURCE = "ADD_RESOURCE";
    // REDUX ACTION CREATORS
    function addResource(payload) {
        return {type: ADD_RESOURCE, payload};
    }
    // REDUX - INITIAL STATE FOR REDUCER
    const initialState = {
        resources: []
    };
    // REDUX REDUCER
    function rootReducer(state = initialState, action) {
        if (action.type === ADD_RESOURCE) {
            return Object.assign({}, state, {
                resources: state.resources.concat(action.payload)
            });
        }
        return state;
    };
    // Redux Store
    const store = Redux.createStore(rootReducer);
    //REACT - REDUX CONNECTORS
    function mapDispatchToProps(dispatch) {
        return {
            addArticle: article => dispatch(addResource(article))
        };
    }
    const mapStateToProps = state => {
        return { resources: state.resources };
    }

    //REACT CODE
    class Eresources extends Component {
        constructor(props) {
            super(props);
        }

        render() {
            console.log(this);
            this.props.addResource({ title: 'Sample title', id: 1 });
            return (
            <div></div>
            );
        }
    }
    const Filtering = connect(mapStateToProps, mapDispatchToProps)(Eresources);
    ReactDOM.render(<Provider store={store}><Eresources/></Provider>, document.getElementById("eresources"));

})();

调用this.props.addResource会返回此错误。

Uncaught TypeError: this.props.addResource is not a function
    at Eresources.render (<anonymous>:454:28)
    at finishClassComponent (react-dom.development.js:14661)
    at updateClassComponent (react-dom.development.js:14616)
    at beginWork (react-dom.development.js:15462)
    at performUnitOfWork (react-dom.development.js:18277)
    at workLoop (react-dom.development.js:18317)
    at renderRoot (react-dom.development.js:18403)
    at performWorkOnRoot (react-dom.development.js:19292)
    at performWork (react-dom.development.js:19204)
    at performSyncWork (react-dom.development.js:19178)

进一步查看this的值，很明显商店没有通过：

props:
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

为什么store没有通过？ mapDispatchToProps有什么问题，还是我缺少应包含的任何库？

Answer 1

将此行中的stage替换为Jenkins

<Eresources/>

并在组件中将<Filtering/>替换为ReactDOM.render(<Provider store={store}><Eresources/></Provider>, document.getElementById("eresources"));：

this.props.addResource

只有包装在this.props.addArticle中的组件才可以访问存储数据。而且它只能通过class Eresources extends Component { constructor(props) { super(props); } render() { console.log(this); this.props.addArticle({ title: 'Sample title', id: 1 }); return ( <div></div> ); } } }和connect

给定的道具来访问

Redux无法将存储传递给React组件

1 个答案: