Javascript &引用；TypeError:无法将未定义或null转换为object"；呈现嵌套的JSON

我试图在react中呈现嵌套的JSON，但在尝试呈现嵌套部分时收到错误“TypeError:无法将未定义或null转换为object”。当这些部件通过componentDidMount（）方法存储在组件的状态时，它们将转换为对象，因此我尝试使用Object.keys（）函数。 对于expample，在下一个JSON中：

{
    "gear": 14,
    "valid": 1,
    "meteo": {
        "wind_direction": 152,
        "wind_velocity": 10.1
    },
}

当我尝试使用Object.keys（）函数渲染它时，如下所示：

const haul = this.state.haul
{Object.keys(haul.meteo).map( key => {
     return(<p>Sea state: {haul.meteo[key]} </p>)
})} 

const-haul=this.state.haul
{Object.keys（haul.meteo）.map（key=>{
返回（海况：{haul.meteo[key]}
）
})} 

错误被抛出到Object.keys（）行，我不明白为什么

完整的组件如下所示：

class ComponentsHaul extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            haul: []
         };
        this.apiHaul = "http://myapi";
    }
    componentDidMount() {
        fetch(this.apiHaul)
            .then(response => {
                return response.json();
            })
            .then(haul => {
                this.setState(() => {
                    return {
                        haul
                    };
                });
            });
    }
    render() {
        const haul = this.state.haul
        return ( 
            <Fragment>
            <p>Gear: {haul.gear}</p>
            {Object.keys(haul.meteo).map( key => {
                return(<p>Sea state: {haul.meteo[key]} </p>)
                })}    
            </Fragment>
        );
    }
}

类组件haul扩展组件{
建造师（道具）{
超级（道具）；
this.state={
运量：[]
};
this.apiHaul=”http://myapi";
}
componentDidMount（）{
取回（这是一个收获）
。然后（响应=>{
返回response.json（）；
})
.然后（拖运=>{
此.setState（（）=>{
返回{
拖
};
});
});
}
render（）{
const-haul=this.state.haul
报税表（
齿轮：{haul.Gear}

{Object.keys（haul.meteo）.map（key=>{
返回（海况：{haul.meteo[key]}
）
})}    
);
}
}

这是因为首次渲染组件时，状态为空

只需添加一个条件：

{ hulu.meteo.length > 0 && Object.keys(haul.meteo).map( key => {
    return(<p>Sea state: {haul.meteo[key]} </p>)
})}  

{hulu.meteo.length>0&&Object.keys（haul.meteo.map）（key=>{
返回（海况：{haul.meteo[key]}
）
})}  

haul

最初是一个数组，没有

meteo

，因此

Object.keys（haul.meteo）

失败。然后将类型（no）更改为对象，保持类型一致

const state={haul:[]}；
console.log（Object.keys（state.haul.meteo））您应该首先检查您的
拖运
状态是否为
气象
。当组件呈现时，您的获取数据还没有准备好。因此，使用还不存在的属性是不安全的

render() {
  const haul = this.state.haul;

  if(!haul.meteo) {
    return <p>Loading...</p>
  }

  return (
    <Fragment>
      <p>Gear: {haul.gear}</p>
        {Object.keys(haul.meteo).map((key) => {
          return <p key={key}>Sea state: {haul.meteo[key]} </p>;
        })}
    </Fragment>
  );
}

render（）{
const-haul=this.state.haul；
如果（！拖运米）{
返回加载

}
返回(
齿轮：{haul.Gear}

{Object.keys（haul.meteo）.map（（key）=>{
返回
海况：{haul.meteo[key]}
；
})}
);
}

当然，在渲染React子对象数组时，不要忘记添加
键
道具。
此问题将在第一次渲染时出现

请参见，haul是包含空数组[]的状态。当它第一次渲染时，React尝试访问第行的meteo

Object.keys(haul.meteo)

但是haul没有名为meteo的未定义属性。因此，React的意思是

Object.keys(undefined)

你会得到这个错误。（componentDidMount在第一次渲染后运行）

解决方案：先检查meteo是否存在，如下所示

{
haul.meteo ? Object.keys(haul.meteo).map( key => {
                return(<p>Sea state: {haul.meteo[key]} </p>)
                })} : []
}

{
haul.meteo？Object.keys（haul.meteo）.map（key=>{
返回（海况：{haul.meteo[key]}
）
})} : []
}
haul
最初是一个数组，没有
meteo
，因此
Object.keys（haul.meteo）
失败。