如何在reactjs的map函数中进行连接

Question

在下面的代码中，concat 正在替换数组中的值而不是将其推送到 react 中。

export default class Newsfeed extends Component {

 constructor(props, context) {
 super(props, context);
 this.imagemodal = this.imagemodal.bind(this)
 this.state = {
   imageArray:[],
   myimage:[{id:1,media:[{url:xyz},{url:abc}},
           {id:2, media:[{url:xyz}, {url:abc}]
  }




 this.state.myimage.map((myimage) => {
    if(someId === myimage.id){

     myimage.media.map((media)=>{

        this.setState({
          imageArray:this.state.imageArray.concat([media.url]),
          showimageslider:true,
          sid:sid
        },() =>console.log(this.state.imageArray.length))
      })

    }
  })

imageArray 正在覆盖数组而不是连接它

帮我解决这个问题..

Answer 1

setState 函数是异步的。你可以试试下面的方法

let mediaURLs = [];
this.state.myimage.map((myimage) => {
    if(someId === myimage.id){
      myimage.media.map((media)=>{
          mediaURLs.push(media.url);      
      })
    }
})
mediaURLs = mediaURLs.concat(this.state.imageArray);
this.setState({
  imageArray:mediaURLs,
  showimageslider:true,
  sid:sid
},() =>console.log(this.state.imageArray.length))

Answer 2

由于 seState 函数是异步的，所以您需要进行正常操作 -> 形成数组，然后执行 setState

const imageArray = [];
this.state.myimage.map((myimage) => {
if(someId === myimage.id){

 myimage.media.map((media)=>{
    imageArray.push(media.url);  
  }
});
this.setState({
      imageArray:this.state.imageArray.concat(imageArray),
      showimageslider:true,
      sid:sid
    },() =>console.log(this.state.imageArray.length))
  })

如何在reactjs的map函数中进行连接

How to concat in map function of reactjs

reactjs

concat

map-function