Reactjs 无法从map和forEach函数遍历道具数据

当我记录产品时，我能够在控制台窗口中获取数据，但无法从对象“产品”的

数组中遍历数据。我尝试了map函数以及forEach函数。数据通过props来自redux状态，并通过
componentWillReceiveProps
保存到组件状态，我调用了
setState
函数

请帮助解决此问题。欢迎提出任何建议

此外，当在代码中添加调试器断点时，我无法在控制台窗口中获取数据，但当我从代码中删除调试器断点时，我可以在控制台窗口中查看数据

import React from 'react';
import {connect} from 'react-redux';
import {fetchProduct} from '../actions/UploadAction';
import ProductCrudList from './ProductCrudList'

class ProductCrud extends React.Component {
    constructor(props){
        super(props);
        this.state={
            products:[],
            x:1,
            test:[{value:1},{value:2}]
        }
    }
    componentWillMount = () =>{
        this.props.fetchProduct();
    }
    componentWillReceiveProps=(nextProps)=>{
        if(this.props!=nextProps){
            this.setState((state)=>({products: nextProps.products}));
        }
    }
    render(){
        // debugger
        const {products, test, x} = this.state;
        console.log(products);
        products.forEach(p=>{
            console.log(p);
        })

        return (
            <div>
                <div className="">
                    <h2 style={{textAlign:'center', margin:'20px'}}>PRODUCTS</h2>
                    {   

                    }
                    {/* <ProductCrudList products={products} /> */}
                </div>
                {/* <h1>Working</h1> */}
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return { 
        products: state.products.product
    }
}







const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        fetchProduct: () => {
            dispatch(fetchProduct())
        }
    }
}


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

从“React”导入React；
从'react redux'导入{connect}；
从“../actions/UploadAction”导入{fetchProduct}；
从“./ProductCrudList”导入ProductCrudList
类ProductCrud扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
产品：[]，
x:1，
测试：[{value:1}，{value:2}]
}
}
组件将装入=（）=>{
this.props.fetchProduct（）；
}
组件将接收道具=（下一步）=>{
if（this.props！=nextrops）{
this.setState（（state）=>（{products:nextProps.products}））；
}
}
render（）{
//调试器
const{products，test，x}=this.state；
控制台日志（产品）；
products.forEach（p=>{
控制台日志（p）；
})
返回(
产品
{   
}
{/*  */}
{/*正在工作*/}
)
}
}
常量mapStateToProps=（状态）=>{
console.log（状态）；
返回{
产品：state.products.product
}
}
const mapDispatchToProps=（调度，ownProps）=>{
返回{
fetchProduct:（）=>{
分派（fetchProduct（））
}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（ProductCrud）；

添加了一个图像，您可以在其中看到显示对象数组的控制台窗口

您的版本是什么？我想你应该使用：
UNSAFE\u componentWillReceiveProps（）
检查这个网站：我的react版本是'16.12.0'。尝试了'UNSAFE\u componentWillReceiveProps（）'。它不起作用了试试：
UNSAFE\u componentWillReceiveProps（nextrops）{if（this.props.props.products.length！==nextrops.props.product.length）{this.setState({products:[…nextrops.products]}；}
你的react版本是什么？我想你应该使用：
UNSAFE\u componentWillReceiveProps（）
检查这个网站：我的react版本是'16.12.0'。尝试了'UNSAFE\u componentWillReceiveProps（）'。它不起作用试试：
UNSAFE\u componentWillReceiveProps（nextrops）{（this.props.products.length！==nextrops.products.length）{this.setState（{products:[…nextrops.products]}）；}}