反应-用用户输入进行API调用的正确方法是什么？

Question

I'm relatively new to React and am building a simple weather app to help me learn. I've read the docs extensively but I'm still stuck. My app has user input where they can search for a city's weather forecast using the OpenWeatherMap API. Currently, my component state looks like this:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      inputText: '',
      data: {
        dayOne: [],
        dayTwo: [],
        dayThree: [],
        dayFour: [],
        dayFive: [],
        daySix: []
      }
    };
  }
}

Once they click on the button to get the data, I use a handleSubmit() method with axios to fetch the data from the API. This successfully populates the component state.

For example, in the React Dev Tools I can see that I get the following data in this.state.data.dayOne[0] , which is exactly what I want:

0: {
  weather_data: {
    cityName: "London"
    date: "2019-08-05"
    description: "scattered clouds"
    temp: 21.79
    tempMax: 21.79
    tempMin: 21.41
    time: "18:00"
    weatherIcon: "03d"
  }
} 

Below my user input component, I have a panel component which displays the current weather data for that day. For clarity, I've reduced the size of the component here:

// In CurrentWeatherDisplay.js:

class CurrentWeatherDisplay extends Component {
  render() {
    return (
      <div className="col-12 border border-info">
        <div className="row">
          <div className="col-6 py-4">
            <p className="mb-0 h6">City name:</p>
          </div>
          <div className="col-6 py-4">
            <p className="mb-0 h6">{this.props.data.dayOne[0].weather_data.cityName}</p>
          </div>
        </div>
      </div>
    );
  }
}

The problem I have is that this.props.data.dayOne[0].weather_data.cityName does not exist until the API has been called, and so the app can't render. I've read the React docs and it says to use the componentDidMount() lifecycle method. But in their example, this is an API call that happens immediately - https://reactjs.org/docs/faq-ajax.html

My app is different because I update the state after the page has loaded, and only when the user has submitted the form . Any ideas how I can correct the structure of my app?

Answer 1

It's fine if you want to put the code for loading into a callback function instead of componentDidMount. The main thing you should take away from that article is to have a state value which starts off empty (or in some other way indicating that data has not been loaded), and a render function that knows what to render when it sees the state is empty.

So for example, if you have a flag in your state called isLoaded, your render function can check if isLoaded is false, and when it see that it returns some placeholder.

render() {
  if (!this.state.isLoaded) {
    return <div>Loading...</div>
  }

  // else, return the populated component
}

Then when you want to load data (componentDidMount in their example, handleSubmit in yours), do so and then call this.setState. The new state will cause the component to rerender, and your render function now returns something different than before, using the new data.