使用 setState 推入数组 - React Native

Question

我是 React Native 的新手，我正在使用来自不同 url 的 api 开发一个项目。当我使用 url 的提取时，我想用 setState 设置我的状态，但是当我尝试它时，console.warn 显示我的数组是空的。我的代码有什么问题？感谢任何反馈:)

  constructor() {
    super();

    this.state = {

      location: [],
      current: [],
      condition: [],
      cities: ["london", "paris", "hongkong", "buenos_aires"]
    
    }
  }

  componentDidMount() {

    let fetches = []
    this.state.cities.forEach(
      city => {
        let resp = fetch('http://api.weatherapi.com/v1/current.json?key=10eb2b8701194b128b2122427211005&q=' + city + '&aqi=no').then(res => res.json());
        fetches.push(resp)
      }
    )


    Promise.all(fetches).then(jsonList => {

      jsonList.forEach(
        json => {
          this.setState(state => {
            const location = state.location.concat(json.location)
            const current = state.current.concat(json.current)
            const condition = state.condition.concat(json.condition)

            return {
              location,
              current,
              condition,
            }
          })


        })
    }).catch(function (error) {

      console.error(error)
    })
    console.warn(this.state)
  }

Answer 1

setState 不会立即更新状态——它会在下一次渲染时更新。假设您实际上是从 API 获取数据，您的 console.warn 显示的是当前渲染的状态。

您可以使用回调函数（setState 的第二个参数）查看设置后的值。

您也可以使用数组传播一次性完成所有更新。

Promise.all(fetches).then(jsonList => {
  this.setState(state => {
     return {
       location: [...state.location, ...jsonList.map(i => i.location)],
       current: [...current, ...jsonList.map(i => i.current)],
       condition: [...state.condition, ...jsonList.map(i => i.condition)],
     }
  },() => {
     console.log(this.state);
  });
})

使用 setState 推入数组 - React Native

Push into arrays with setState - React Native

api

push

setstate

react-native

promise.all