javascript - react : get data after form submit using async/await

Question

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

TypeError: Cannot read property 'main' of null

我不明白为什么这些数据没有显示在屏幕上。如果没有显示，对我来说会更有意义。但如果我评论这一行，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>
);