Блог

Главная - Вопросы по программированию - не удается вставить массив в состояние в react

не удается вставить массив в состояние в react

#javascript #reactjs

#javascript #reactjs

Вопрос:

Итак, я получаю некоторые данные о погоде из API через асинхронную функцию. Эта функция возвращает массив объектов, которые я хочу установить в состояние, и когда состояние получает этот массив, я хочу отобразить данные.

 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
}
}
...

Функция находится в this.props.weather . я также попытался установить состояние следующим образом

 weather: weatherArray

и

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

Ничто из этого не устанавливает значение для состояния. Что я делаю не так?

Комментарии:

1. Предполагается ли, что это должно быть this.setState({ weather: weatherArray })

2. почему вы используете component.setState и ...component.state.weather , попробуйте this.setstate и ...this.component , и используйте функцию стрелки

3. вы регистрировали weatherArray право перед setState тем, чтобы посмотреть, есть ли в нем какое-либо содержимое?

4. вам не нужно использовать async в componentDidMount.

5. @GabrielePetrioli я сделал, и у него есть массив, который он должен иметь. Даже если я сделаю что-то вроде этого.state. array = weatherArray, и я регистрирую состояние, массив установлен, но вне функции его больше нет.

Ответ №1:

вы должны использовать this.setState для обновления значения состояния

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

Комментарии:

1. Я передаю «это», когда вызываю функцию setWeather. Параметр «component», используемый внутри функции, на самом деле является «this». Это работает, потому что я могу console.log(component.state) и получить все данные.