无法在反应中将数组插入 state

Question

So i'm getting some weather data from an API through an async function. This function returns an array of objects that i want to set on a state, and when the state receives this array, i want to render the data.

export class Dashboard extends React.Component {
  
  constructor(props) {
    super(props);

    this.state = { 'graficoEnergia': DIA,
      weather: []
    };
  }

  componentDidMount() {
    
    async function setWeather(getWeatherFunction, address, component){
      const weatherArray = await getWeatherFunction(address)
      component.setState({
        weather: [...component.state.weather, weatherArray]
      })
    }

    if(!this.props.loading){
      setWeather(this.props.weather, this.props.doc.address, this);
    }

render() {
return etc
}
}
...

The function is in this.props.weather. i have also tried setting the state like this

weather: weatherArray

and

weather: component.state.weather.concat(weatherArray)

None of this sets the value to the state. What am I doing wrong?

Answer 1

you should use this.setState to update state value

setWeather = async (getWeatherFunction, address) =>{
    const weatherArray = await getWeatherFunction(address)
    this.setState({
      weather: [...this.state.weather, weatherArray]
    })
  }