为什么我不能在状态中推送到数组？

Question

我似乎无法从API将对象推送到状态数组.这是我的代码

      async _fetchData(number){
        try{
          await console.log('asd',number)
          let response = await fetch( 'https://www.beanlinked.com/wp-json/wp/v2/media/'+this.state.News[number].featured_media)
          let responseJson = await response.json()
          await console.log("responseJson")
          let tempURL = responseJson.guid
          let url = tempURL.rendered

          for (var i = 0; i < this.state.News.length; i++) {
            const items = this.state.News;
            items[number].URLOnSever = url;

          }

          this.state.News.push({
            URLOnSever : url
          })
          console.log("imageurl",this.state.News.URLOnSever)

          return url
        }catch(e){
          console.log('problem'+e)
        }
      }

我只是想推送新的URL this.state.News.

Answer 1

不要改变你正在做的Array#push状态 - 改变状态内的数组.setState相反,使用旧数组创建一个新数组,并将添加的元素设置为状态而不是推送到旧数组:

this.setState(prevState => ({
  News: [
    ...prevState.News,
    { URLOnServer: url }
 ]
}));

这将设置News为先前状态的News数组内容(通过数组扩展语法)加上新对象.它与您的代码相同,但没有state直接变异.在React文档中了解更多信息.