Как я могу отобразить два массива в React одновременно?

Question

Я новичок в React. Я использую заполнитель json для извлечения данных, используя ax ios. У меня есть два массива в состоянии.

state = {
                posts : [],
                images : []

       };

После получения данных через ax ios Я использую set state up, обновите значение. Теперь я хочу, чтобы все это отображалось на карточке. Если бы это был только один массив, я бы использовал карту для отображения содержимого. Теперь я хочу, чтобы изображение из массива изображений отображалось с каждым постом. Как я мог go об этом?

Answer 1

Таким способом вы можете создать один массив из двух.

const postsWithImage=this.state.posts.map(post=>{
return {
...post,
img: this.state.images.find(img=> img.id===post.imgid) // or some relation between posts and images
}

})

теперь дополнительно отображайте postsWithImage

Answer 2

вместо отдельных массивов вы можете объединить их и l oop через это:

const renderPosts = ()=>{
  return this.state.posts.map(post,index=>{
      return(
          <Card
             postImage={post.image}
             postData={post.data}
          />
       )
})
}

Но если вы настаиваете на том, чтобы хранить их отдельно, вы можете сделать вложенный l oop, например:

const templates = {
  template1: {
    items: [1, 2]
  },
  template2: {
    items: [2, 3, 4]
  },
};

const App = () => (
  <div>
    {
      Object.keys(templates).map(template_name => {
        return (
          <div>
            <div>{template_name}</div>
            {
              templates[template_name].items.map(item => {
                return(<div>{item}</div>)
              })
            }
          </div>
        )
      })
    }
  </div>
);