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

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

我只想将新网址推送到this.state.News。

Answer 1

不要改变你正在使用Array#push做的状态 - 改变状态内的数组。使用setState代替创建一个 new array ，将旧数组加上添加的元素设置为state而不是推送到旧数组：

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

这会将News设置为先前状态的News数组内容（通过array spread syntax）加上新对象。它与您的代码相同，但不直接突变state。请访问the React documentation了解详情。

Answer 2

将某些东西推送到存储在状态中的数组的简单方法就是抓住状态并将其存储在变量中。将项目推送到该变量并设置状态。

const temp = this.state.list;
temp.push(newItem);
this.setState({ list: temp });