Question

我是新手做出反应，但我不理解代码出错了，我一直收到错误

Uncaught TypeError: Cannot read property **'productInfo'** of null React js

productInfo值为null我设置正确吗？

错误发生在此行

var productNode=this.state.**productInfo**.map(function(productInfos,index)    


var Content1=React.createClass({

loadProductsFromServer:function(){
    var productInfo=[
        {
            "pName":"Shrugs",
            "pId":"1",
            "pPrice":"400",
            "pImg":"http://MYLINK/images.png"
        },
        { 
            "pName":"Jewelry",
            "pId":"2",
            "pPrice":"100",
            "pImg":"http://MYLINK/images.png"
        },
        { 
            "pName":"Shoes",
            "pId":"3",
            "pPrice":"500",
            "pImg":"http://MYLINK/images.png"
        }       
    ];      
    this.setState({productInfo:productInfo});   //is it set proper                  
    },

getIntialState:function(){  
    var productInfo=[];     
    return{
        productInfo:productInfo         //is it set proper  
            }
    },

componentDidMount:function(){
     this.loadProductsFromServer();      
},  

render:function(){      
    var productNode=this.state.productInfo.map(function(productInfos,index){// here the error occurs wherein the productInfo has null data          
        return(
             <div className="conDisp">                         
                 <div className="pSet">                                                                         
                    <div className="pName">
                       {productInfos.pName}
                    </div>
                    <div className="pPrice">
                        {productInfos.pPrice}
                    </div>                
                </div>
             </div>
           );
        });     
    }   
});





ReactDOM.render(
      <Content1/>,
       document.getElementById('content')
       );

productInfo值为null我设置正确吗？在渲染返回功能中

这些是使用过的脚本

     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

Answer 1

显然，在React 0.13之后，您需要在构造函数中自己调用getInitialState。构造函数应为：

constructor(props) {
  super(props);
  this.state = this.getInitialState();
}

有关此问题的讨论，请参阅here。

Answer 2

试试这个

    render:function(){      
     {            
            return(
                {this.state.productInfo.map((productInfos,index) => {return 
                     <div className="conDisp">                         
                         <div className="pSet">                                                                         
                            <div className="pName">
                               {productInfos.pName}
                            </div>
                            <div className="pPrice">
                                {productInfos.pPrice}
                            </div>                
                        </div>
                     </div>
             })}
           );
      }

未捕获的TypeError：无法读取null React js的属性'productInfo'

2 个答案: