React Uncaught TypeError：无法读取未定义的属性[property_name]

我从父组件<CampersList _data={this.state.data}/>传递一个属性，帮助我理解，应该如何获取属性_data[0].updated.$t。目前，它返回我一个错误：
这里的子组件的代码：React Uncaught TypeError：无法读取未定义的属性[property_name]

class CampersList extends React.Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    let campersNodes = this.props._data.map((element, index) => { 
     return (
      <Camper user={element} index={index} key={index}/> 

     ); 
    }); 
    let updateDate = this.props._data[0].updated.$t; 
    return (
     <div> 
      <table> 
       <tbody> 
       {campersNodes} 
       </tbody> 
      </table> 
      <p>{updateDate}</p> 
     </div> 
    ) 
    } 
}

但是，如果我将减少let updateDate = this.props._data[0].updated.$t;到
let updateDate = this.props._data[0];则抛出了我不同的错误：

来源

2016-12-23 Taras Yaremkiv

检查'this.props._data'是什么。 – dfsq

@dfsq this.props._data是一个对象数组 –

可以显示_data的一些示例数据？ – iamsaksham

此错误意味着数据[0]是未定义的。

简而言之，反应需要几毫秒来更新其道具，直到它们未定义。所以最初data[0] is undefined。

解决方案1：要解决此问题，请尝试将它们置于if条件之内。

if(this.props._data[0]) { 
    //code 
}

解决方案2：使用getDefaultProps，这给默认的道具。此解决方案通过反应推荐

getDefaultProps() { 
    return { 
    _data: [] 
    }; 
}

来源

2016-12-23 11:51:02 iamsaksham

我已经添加了一些更多的信息给我的问题，也许它会清除问题 –

@TarasYaremkiv我对'this.props._data [0] .updated。$ t'要达到什么感到困惑。你想访问更新的数组，或者它有一些名称更新的属性？这个'$ t'是什么，因为据我所知，反应没有像$这样的东西来访问变量/数组/对象 – iamsaksham

不，只要你将正确的道具传递给组件，这是不可能的。最可能的问题是''''。我无法获得'$'在reactjs中做什么 – iamsaksham

我们通常面临这种问题的反应。原因是执行渲染方法时，数据可能无法提供给您，您必须通过某些网络调用获取数据。你可以使用一些条件语句，如：

let updateDate = this.props._data[0] ? this.props._data[0].updated.$t : null; 这将再次遇到麻烦，如果this.props._data[0].updated是不确定的。

因此，您将不得不再次嵌套来检查变量是否已定义。

Lodash给你一些很酷的方法，如get来处理这种情况。简单地使用：

let updateDate = _.get(this.props, '_data[0].updated.$t', 'Default Value');

来源

2016-12-23 11:46:08 Vikramaditya

我已经为我的问题添加了更多信息，可能它会清除问题 –

由于'updateDate'是一个JavaScript对象，你不能直接渲染渲染方法中的整个对象。 – Vikramaditya

React Uncaught TypeError：无法读取未定义的属性[property_name]

回答

相关问题