如何在获取数据时处理对象，它最初为null，然后填充数据

Question

我一直试图通过这种方式从道具中提取一些信息。

let roleType=this.props.user.data.permissions.map((val)=>{

            console.log(val);
});

在组件获得渲染的初始阶段，数据中没有任何内容，因此我得到一个错误，它无法映射哪个是真的。我该如何处理这些案件。如果我控制台记录上面的道具，我看到数据最初是空的，然后它被填满。但是，因为这个，网络应用程序崩溃了吗？

Answer 1

为了避免在尝试处理此类情况时出现这种情况，您可以按照预期的格式初始化数据，或者在使用时为其提供条件检查

let roleType=this.props.user && this.props.user.data && this.props.user.data.permissions && this.props.user.data.permissions.map((val)=>{
        console.log(val);
});

或初始化它

state = {
    user: {
         data: {
             permissions: []
         }
    }
}

您可以采取哪些措施来避免意外的未定义方案，即使用PropType验证

Component.propTypes = {
    user: PropTypes.shape({
         data: PropTypes.shape({
             permissions: PropTypes.Array
         })
    })
}

您可以对第一种方法做的另一项改进是编写一个检查嵌套数据的函数

function checkNested(obj, accessor) {
  var args = accessor.split('.')

  for (var i = 0; i < args.length; i++) {
    if (!obj || !obj.hasOwnProperty(args[i])) {
      return false;
    }
    obj = obj[args[i]];
  }
  return true;
}

然后你可以像使用它一样

let roleType= checkNested(this.props.user, 'data.permissions') && this.props.user.data.permissions.map((val)=>{
        console.log(val);
});

附：您还可以改进上述方法以考虑数组索引

Answer 2

在映射之前，只需检查对象是否具有您正在查找的必需属性。如果它不使用空数组。

let roleType = this.props.user.data ? this.props.user.data.permissions.map((val) => {
  console.log(val);
}) : [];

Answer 3

看起来你必须进行API调用来获取数据，所以在响应来之后添加用于在componentDidmount中获取数据的代码，在state中设置数据响应。因此该组件将使用更新的数据再次呈现。

此外，在渲染部分放置一个条件，使用状态，以便它不会尝试访问null值的任何属性。

Answer 4

编辑：像其他人说的那样，问题并不能说明你是如何收到数据的。我的答案是基于您获取有关加载时间的数据。如果您从外部或通过异步调用获取数据，则此答案不起作用。

您可以在运行代码之前等待DOM内容完全加载。

document.addEventListener('DOMContentLoaded', function() {
    let roleType=this.props.user.data.permissions.map((val)=>{
        console.log(val);
    });
}, false);

另一种方法是等待页面完全加载。这包括图像和样式。

window.onload = function(e){ 
    let roleType=this.props.user.data.permissions.map((val)=>{
        console.log(val);
    });
}

第一个是运行速度更快，但如果在运行代码之前需要加载图像，则可能会更好。

最后，它也可能是代码顺序的问题，只需将代码放低，也可以解决问题。