Question

我从后端获取一个数组，它可以正常工作，但是redux在某种程度上不会将数组赋值给变量。 products中的initialState始终为空，如果我尝试在我的组件中引用它，则为undefined。

RestActions：

const receivedProducts = (products) => ({
    type: "RECEIVED_PRODUCTS",
    products
})


export function getProducts() {
    return function(dispatch) {
        return axios({
            url: '/products',
            timeout: 20000,
            method: 'get'
        })
        .then(function(response) {
            let p = response.data;
            dispatch(receivedProducts(p));
        })
        .catch(function(error) {
            if(error.response) {
                // DEBUGGING
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            }
        })
    }
};

我将reducer放入store。这就是它的样子。

商品

const initialState = {

    // KEYBOARD
    searchWord: '',

    // BASKET
    basket:[],

    // PRODUCTS
    products: []
};
const reducer = (state = initialState, action) => {
    console.log('reducer', action);
    console.log('basket', state.basket);
    console.log('products', state.products)
    switch(action.type) {

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

我的组件根据products动态创建按钮，并在网格中呈现它们。每当我打电话给this.props.products.length时，它都是未定义的。这是组件：

按钮

class ButtonsGrid extends React.Component {

    componentDidMount() {
        this.props.getProducts();
    }

    addProduct = (product) => {
        this.props.onButtonPress(product);
    }

    render() {   
        const {classes} = this.props;
        return (
            <div>
                <GridList cellHeight={50} cols={10}>
                    {this.props.list.length > 0 ? this.props.list.map(product => {
                        return (
                            <Button key={Math.random()} style={{width: '200px', border: '1px solid'}} variant="raised" color="primary" onClick={() => this.addProduct(product)}>
                                <div 
                                    style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
                                        {product.name}
                                </div>
                            </Button>
                        );
                    }) : ''}
                </GridList>
            </div>
        );
    }
}

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);

然后在App.js

中调用它

App.js

<ButtonsGrid store={store} list={this.state.list} clicked={this.clicked}/>

所以，我可以console.log('reducer', action);它确实打印了正确的内容，但我无法将数据分配给products。我尝试过做this，但它仍然没有用。

数据只是两个json对象。

感谢任何帮助！

Answer 1

传播state对象

 return Object.assign({}, ...state, {
  products: [
    ...state.products,
    action.products
  ]
});

Redux没有将获取的数组分配给状态变量

1 个答案: