Redux存储变量突然未定义

时间:2018-03-20 15:16:41

标签: javascript reactjs redux react-redux

我正在尝试将json对象添加到数组中。 CAKeyFrameAnimation不会返回CAShapeLayer,而是console.log(...)。但是,当我尝试插入对象时,我收到undefined例外。

使用reducer存储

[]

这是使用TypeError: Cannot convert undefined or null to object

呈现表格的组件

const reducer = (state = initialState, action) => {

    switch(action.type) {

        // REST
            case 'RECEIVED_PRODUCTS':
                return Object.assign({}, ...state, {products: action.products});


        // KEYBOARD

            // SEARCHBAR
                case 'SEARCH_CHANGE':
                    return Object.assign({}, state, { searchWord: [...state.searchWord, action.text] });
                case 'SEARCH_CHANGE_CORRECT':
                    return Object.assign({}, state, { searchWord: state.searchWord.slice(0, state.searchWord.length-1)});
                case 'SEARCH_CHANGE_SPACE':
                    return Object.assign({}, state, { searchWord: [...state.searchWord, ' ']});
                case 'SEARCH_CHANGE_DELETE':
                    return Object.assign({}, state, { searchWord: ''});

            // VIRTUAL KEYBOARD
                case 'TOGGLE_KEYBOARD':
                    return Object.assign({}, state, { toggleKeyboard: !state.toggleKeyboard});


        // BUTTONSGRID
            case 'PRODUCT_ADD':
                return Object.assign( {}, state, {basket: [...state.basket, action.product]}); 


        // BASKET
            case 'PRODUCT_REMOVE':
                var removedFromBasket = state.basket.filter(function(product) {return product !== action.product});
                return Object.assign( {}, state, {basket : removedFromBasket});
            case 'PRODUCT_SET_COUNT':
                break;

        default:
            return state;  
    } 
}
按钮组件中的

this.props.basketclass Basket extends React.Component { productClicked = (row) => { console.log(row.description); } removeProductFromBasket = (product) => { console.log("Removing product") } render() { return ( <div> <ReactTable data = {this.props.basket} columns= {[ { Header: "Name", accessor: "description" }, { Header: "Preis", id: "salesPrice", width: 50, accessor: p => p.salesPrice, }, { Header: "Anzahl", id: 'purchasePrice', accessor: "purchasePrice", Cell:({row}) => (<Button onClick={() => this.productClicked(row)}>{row.purchasePrice} Stk.</Button>) }, ]} /> </div> ); } } const mapStateToProps = (state) => { return { basket: state.basket } } const mapDispatchToProps = (dispatch) => { return { searchChanged: (data) => { let action = undefined; dispatch(action); } } } export default connect(mapStateToProps, mapDispatchToProps)(Basket);

mapStateToProps

最后是mapDispatchToProps

const mapStateToProps = (state) => {
    return {
        basket: state.basket,
        products: state.products
    }
}

const mapDispatchToProps = (dispatch) => {
    return { 
        onButtonPress: (data) => {
            let action = { type: 'PRODUCT_ADD', product: data };
            dispatch(action);
        },
        getProducts : function() {
            dispatch(getProducts());
        }
    };
}

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

我尝试手动添加一个对象并且它正在工作 - 我复制了完全相同的json对象,我试图通过initialState添加。

我在Chrome中调试了应用程序,有趣的是除了const initialState = { // KEYBOARD searchWord: '', toggleKeyboard: false, // BASKET basket: [], // PRODUCTS products: [] }; 之外的所有内容都是undefined

redux是btw分配给我按下的按钮的对象。

Here's堆栈跟踪。

谢谢!

0 个答案:

没有答案