如何在 React 中为嵌套的 object 设置状态？

Question

I'm learning react by building a weather api. I make an API call and store it in state.

  state = {
        forecasts: {
            error: null,
            isLoaded: false,
            forecasts: []
        }
    }

    componentDidMount() {
        const endpoint = `http://dataservice.accuweather.com/forecasts/v1/daily/5day/207931?apikey=KEY&language=en&details=true&metric=true`;
        fetch(endpoint)
        .then(res => res.json())
        .then((result) => {
            this.setState({
                'forecasts.isLoaded': true,
                'forecasts.forecasts': result.DailyForecasts,
            });
        },
        (error) => {
            this.setState({
                'forecasts.isLoaded': true,
                'forecasts.error': error
            });
        })
    }

When I pass this down as props, I get no data?

<WeatherOverview weather={this.state.forecasts}/>

Answer 1

Use spread syntax to copy the entire previous object and then override some of its keys. You should also use the form of setState that takes a function because you want to reference the previous value of state.forecasts :

.then((result) => {
            this.setState(state => ({
                forecasts: {
                    ...state.forecasts,
                    isLoaded: true,
                    forecasts: result.DailyForecasts,
                },
            }));
        },
        (error) => {
            this.setState(state => ({
                forecasts: {
                    ...state.forecasts,
                    isLoaded: true,
                    error: error,
                },
            }));
        })

or you may want entirely new objects to wipe out the previous error state:

.then((result) => {
            this.setState({
                forecasts: {
                    error: null,
                    isLoaded: true,
                    forecasts: result.DailyForecasts,
                },
            });
        },
        (error) => {
            this.setState(state => ({
                forecasts: {
                    forecasts: [],
                    isLoaded: true,
                    error: error,
                },
            }));
        })

Answer 2

you are not passing the state correctly, you need to pass the state without quotation marks

this.setState({
 'forecasts.isLoaded': true,
 'forecasts.forecasts': result.DailyForecasts,
});

should be like this:

    this.setState({
     forecasts: {
      ...state.forecasts,
      isLoaded:true,
      forecasts:result.DailyForecasts},
   });