Reactjs Redux未将获取的数组分配给状态变量_Reactjs_Redux_React Redux_Axios_Redux Thunk

Reactjs Redux未将获取的数组分配给状态变量

reactjs redux

Reactjs Redux未将获取的数组分配给状态变量,reactjs,redux,react-redux,axios,redux-thunk,Reactjs,Redux,React Redux,Axios,Redux Thunk,我从后端获取一个数组，它可以工作，但redux不知何故没有将数组分配给变量products始终为空，如果我尝试在组件中引用它，则它是未定义的重述： const receivedProducts = (products) => ({ type: "RECEIVED_PRODUCTS", products }) export function getProducts() { return function(dispatch) { return ax

我从后端获取一个数组，它可以工作，但redux不知何故没有将数组分配给变量<

initialState

中的code>products始终为空，如果我尝试在组件中引用它，则它是

未定义的

重述：

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

我将我的

减速机

放在

存储中

。这就是它看起来的样子

商店

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

我的组件基于

产品

动态创建按钮，并在网格中呈现它们。无论何时调用

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

class按钮网格扩展了React.Component{
componentDidMount（）{
this.props.getProducts（）；
}
addProduct=（产品）=>{
本.道具.按纽（产品）；
}
render（）{
const{classes}=this.props；
返回(
{this.props.list.length>0？this.props.list.map（product=>{
返回(
此.addProduct（产品）}>
{product.name}
);
}) : ''}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
篮子：state.basket，
产品：国家产品
}
}
const mapDispatchToProps=（调度）=>{
返回{
OnButton按：（数据）=>{
let action={type:'PRODUCT_ADD'，PRODUCT:data}；
派遣（行动）；
},
getProducts:function（）{
调度（getProducts（））；
}
};
}
导出默认连接（MapStateTrops、mapDispatchToProps）（按钮网格）；

然后在

App.js中调用它
App.js
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);


因此，我可以console.log（'reducer'，action）并且它确实打印了正确的内容，但我无法将数据分配给产品
。我试过了，但还是不行
数据只是两个json对象
感谢您的帮助
 展开状态
对象
 return Object.assign({}, ...state, {
  products: [
    ...state.products,
    action.products
  ]
});

展开状态
对象
 return Object.assign({}, ...state, {
  products: [
    ...state.products,
    action.products
  ]
});

您收到了什么错误？（如果有）在呈现按钮组件中的按钮之前，我检查{this.props.list.length>0？…}
。我得到的长度是未定义的
。我忘记将products:state.products
添加到按钮的mapstatetrops
中，现在我得到TypeError:无法读取未定义的属性“cols”。如果我console.log（）
商店中的产品，那么我只会得到一个空数组。好吧，我完全糊涂了。我可以在ButtonsComponent
中成功地记录this.props.products
，并打印一个空数组。但是，如果我尝试将对象映射到循环中的按钮，则会得到未定义的
。这太令人困惑了。请尝试在按钮网格中执行console.log（This.props）
，以查看This.props.list
是否存在。确实有效this.props.list
仅用于在我集成redux
之前进行测试，您会收到什么错误？（如果有）在呈现按钮组件中的按钮之前，我检查{this.props.list.length>0？…}
。我得到的长度是未定义的
。我忘记将products:state.products
添加到按钮的mapstatetrops
中，现在我得到TypeError:无法读取未定义的属性“cols”。如果我console.log（）
商店中的产品，那么我只会得到一个空数组。好吧，我完全糊涂了。我可以在ButtonsComponent
中成功地记录this.props.products
，并打印一个空数组。但是，如果我尝试将对象映射到循环中的按钮，则会得到未定义的
。这太令人困惑了。请尝试在按钮网格中执行console.log（This.props）
，以查看This.props.list
是否存在。确实有效这个.props.list
在我集成redux
之前只是为了测试，我没有使用combinereducer
。如果我试图像这样将对象映射到ButtonsGrid
中的按钮，请您在mapstatetrops
中控制台state
并共享结果{this.props.products.length>0？this.props.products.map（product=>{
-我得到一个类型错误：无法读取未定义的@Claim0013的属性'cols'，与此不同。请检查编辑。仅状态
秒param@Claim0013[…this.state.products，action.products]
我错过了它。我的错。它是连接数组中现有和新元素的方式。我没有使用组合减速机
。如果我试图像这样将对象映射到按钮网格
中的按钮，请您在MapStateTrops
中控制台状态
并共享输出{this.props.products.length>0？this.props.products.map（product=>{
-我得到一个类型错误：无法读取未定义的@Claim0013的属性'cols'，与此不同。请检查编辑。仅状态
秒param@Claim0013[…this.state.products，action.products]
我错过了它。我的错。它是对数组中现有元素和新元素进行合并的方式。