Реагировать не может сделать массив (состояние) в одной строке

Question

Состояние

state = {
    posts: [],
}

Посты получают значение API

{
  "authors": [
    {
      "authorName": "Sideney Sheldon",
      "authorImageURL": "http..."
    },
    {
      "authorName": "Sideney Sheldon",
      "authorImageURL": "http..."
    },
    ....
  ]
}

код

render(){
  const postList = posts.length ? (
    posts.map(post => {
      return (
        <div className="" key={this.state.key}>
          <div className="containerimager">
            <img  style={imgb} src={post.authorImageURL} />
          </div>
          <h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
        </div>
      )
    })
  ) : 
  (
      <div className="center">No posts to show</div>
  );

  return(
    {postList}
  )
}

{postlist}возвращает объекты, но возвращает каждый объект в новой строке на веб-странице. Я хочу, чтобы все результаты (изображения) в одной строке могли кто-нибудь помочь?

Answer 1

Это проблема CSS, вы должны использовать display: flex вместе с flex-direction: row в родительском div, что обеспечит желаемый результат.

Answer 2

Если вам нужно несколько элементов в одной строке, вы можете добиться этого с помощью css.Используйте display: flex (по умолчанию flex-direction row, что вам нужно) на обертке до postList.Вы можете передать его как стиль через JSX или добавить класс, который определяет это свойство

render(){
  const postList = posts.length ? (
    posts.map(post => {
      return (
        <div className="" key={this.state.key}>
          <div className="containerimager">
            <img  style={imgb} src={post.authorImageURL} />
          </div>
          <h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
        </div>
      )
    })
  ) : (
  <div className="center">No posts to show</div>
  );

  return(
    <div style={{display: 'flex'}}>{postList}</div>
  )
}

Answer 3

Вот пример CodeSandbox , который я создал, используя ваш код.

Если вы пытаетесь расположить пользователей горизонтально (слева направо), CSS - это путь.В частности, отображаемый <div> имеет по умолчанию стиль display: block, который заставляет его занимать свою собственную строку на странице.

Чтобы выстроить div в ряд, вынужно как-то применить стиль display: inline-block.В моем примере я использовал style prop, но вы, вероятно, захотите сделать это непосредственно в CSS.

Answer 4

posts.map(post,index => {
          return (
            <div className="" key={this.state.key}>
            <div className="containerimager">
  <img  style={imgb} src={post.authors[index].authorImageURL} />
   </div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
          )
        })
      ) : (
        <div className="center">No posts to show</div>
      );

Попробуйте это