在React中使用点表示法访问属性会引发错误

Question

我正在尝试使用点表示法访问json对象，但它会引发错误。这是我的代码：https://codepen.io/manAbl/pen/aGymRg?editors=0110

我这样解构：const { weather } = this.state;

当我这样做时：console.log(weather)它向我显示了洞json对象，很好但是当我尝试console.log(weather.name)时，控制台会抛出错误

我做错了什么？我一定很容易丢失一些东西，但是我看不到它而且我被困住了

我希望能够访问属性并将它们设置为我的状态值，因此我可以根据当前天气情况编写一些显示图标的函数

Answer 1

this.state.weather最初是null（在调用setState中的componentDidMount之前），所以在访问之前，您需要先检查它是否为空属性。

或者，最初将weather设置为{}而不是null。

Answer 2

你像这样初始化你的状态：

this.state = {
  weather: null,
  loading: true,
};

然后，您需要更新weather

中的componentDidMount var 在调用componentDidMount方法

后触发

render

因此，第一次调用render方法时，weather var为null并在调用componentDidMount后填充

你应该做

this.state = {
  weather: {},
  loading: true,
};

或检查您的var是否不是null