React：使用 async/await 提交表单后获取数据

Question

我正在从 API 获取数据，但无法将它们显示到屏幕上。当用户在表单中输入内容并单击按钮提交时，我想获取数据。 我有一个错误：

TypeError: 无法读取 null 的属性 'main'

我不明白为什么这些数据不显示在屏幕上。如果没有显示，那对我来说会更有意义。但是如果我评论这一行，来自 ChildComponent 的 props.data.city 会正确显示。我的代码：

class ExampleComponent extends Component {
  state = {
    city: null
  }

  getData = async e => {
    e.preventDefault();
    const city = e.target.elements.city.value;
    const getData = await fetch(`${url}${city}&appid=${key}`);
    const data = await getData.json();

    this.setState({
      city: data
    });
    console.log(this.state.city); // return correct value, not null
    console.log(this.state.city.main.temp_min); // return correct value, not null
  }
  render() {
    return (
      <>
        <FormComponent onSubmit={this.getData} />
        <ChildComponent data={this.state.city} />
      </>
    );
  }
}

const FormComponent = props => (
  <form onSubmit={props.getData}>
    <input type="text" name="city" />
    <button type="submit">do it</button>
  </form>
);

const ChildComponent = props => (
  <div>
    <h3>{props.data.city}</h3>
    <h4>{props.data.main.temp_min}</h4>
  </div>
);

Answer 1

由于数据已获取，因此无法立即使用（渲染时）。检查是否在子组件中定义了数据。有很多方法可以做到这一点，但这应该就足够了

const ChildComponent = props => (
  <div>
    {props.data && (
      <div>
        <h3>{props.data.city}</h3>
        <h4>{props.data.main.temp_min}</h4>
      </div>
    )}
  </div>
);