Question

我想从 api 渲染数据，每次用户在输入中写入某个城市时，它必须更改 api 的城市部分并且必须渲染新数据，但是在提交时它不会渲染，它只能在第二次提交后工作

  async componentDidUpdate(prevprops) {
    if (this.props.city != prevprops.city) {
      const url = `http://api.weatherapi.com/v1/forecast.json?key=8246dc795dd340d98f7225813210706&q=${prevprops.city}&days=10`;
      const res = await fetch(url);
      const data = await res.json();
      this.setState({ data: data, forecast: data.forecast.forecastday });
    }
  }

如果用户只输入空白输入，它就会崩溃

Answer 1

如果您遇到网络错误问题，那是因为您在 https 应用中发出 http 请求。

如果您为空字符串和错误的城市发出网络请求，您也会收到错误消息。这是因为，如您所知，数据是错误的。在这种情况下，捕获错误并在应用程序中抛出任何 toast 消息，以便用户可以纠正那里的错误。不要多次添加 await，而是将它们组合起来

  await fetch(url)
    .then((res) => res.json())
    .then((data) => {
        console.log("data", data);
        this.setState({
        data: data,
        forecast: data.forecast.forecastday,
        error: false
    });
  })
  .catch((err) => {
      this.setState({ error: true });
    });

这里我添加了一个新的状态，叫做 error，所以如果有任何类型的错误，我们会向用户抛出一些工作消息。我有示例代码和框，供您查看https://codesandbox.io/embed/thirsty-bash-jqx1i?file=/src/App.js

React setState 不会立即更新

1 个答案: