Question

“TypeError：无法将未定义或空转换为对象”呈现嵌套 JSON

2020-06-12

187

javascript json reactjs

我尝试在 React 中渲染嵌套 JSON，但在尝试渲染嵌套部分时收到错误“TypeError：无法将未定义或 null 转换为对象”。这些部分在通过 componentDidMount() 方法存储在组件状态中时会转换为对象，因此我尝试使用 Object.keys() 函数。例如，在下一个 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>)
})}

错误在 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>
        );
    }
}

Answer 1

haul 最初是一个数组，没有 meteo ，因此 Object.keys(haul.meteo) 失败。然后您稍后将类型（不行）更改为对象，保持类型一致。

const state = { haul: [] };
console.log(Object.keys(state.haul.meteo));

如果您更改初始状态以提供一个空的 meteo 对象，这应该在获取数据时在初始和后续渲染中有效。

this.state = {
  haul: {
    meteo: {},
  },
}

const state = { haul: { meteo: {} } };
console.log(Object.keys(state.haul.meteo));

Answer 2

这是因为当您第一次渲染组件时您的状态为空。

只需添加一个条件：

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

Answer 3

首先，您应该检查 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>
  );
}

当然，在呈现 React 子项数组时，不要忘记添加 key 属性。