Как использовать map () с данными из ответа axios?

Question

Я использую axios для получения данных с сервера и их хранения в состоянии. Когда я делаю state.map( post => {console.log(post)} ), я ничего не вижу.

Я использую Express, Mongoose, NextJS и Axios.

Я использую axios, чтобы получить данные с сервера и сохранить их в this.state.posts. Когда я делаю console.log(this.state.posts) в componentDidMount, он отлично регистрирует массив записей. Но когда я делаю то же самое в render(){ return ( /*here*/)} ничего не показывает.

В этом журнале регистрируются все сообщения без ошибок.

async componentDidMount() {     
        const { data } = await axios.get('/api/all')
        this.setState({posts: data, isLoading: false})
        console.log(this.state.posts)
    }

Но это ничего не регистрирует -

render() {
  return({ 
    posts.map( post => {
      <Post title={post.title} />
    })  
  })
}

Answer 1

{ 
   posts.map( post => {
    return <Post title={post.title} />
}) 
}

Возможно, это работает.

Answer 2

Измените ваш метод рендеринга следующим образом:

render() {
  let Posts = {...this.state.posts};
  return({
    Posts.map( post => <Post title={post.title} />);  
  })
}

Ваш код неправильно ссылается на сообщения в состоянии. Также, таким образом, любая операция над сообщениями не повлияет непосредственно на объект состояния. Надеюсь, это поможет!

Answer 3

Вы можете предоставить обратный вызов метода setState, который будет запускаться после обновления состояния.Вы можете использовать

this.setState({posts: data, isLoading: false}, console.log(this.state.posts))

для регистрации обновленного состояния.

А в методе рендеринга вы должны использовать

render() {
  return(
    this.state.posts.map( (post,i) => (
      <Post title={post.title} key={i} />
    ))  
  )
}

или

 render() {
  const { posts} = this.state;
   return(
      <React.Fragment>
       posts.map( (post,i) => (
        <Post title={post.title} key={i} />
       ))  
     </React.Fragment>
   )
 }

Answer 4

Вам нужно вернуть direclty posts.map без открытия {}

render() {
  const { posts = [] } = this.state
  return(
    posts.map( post => 
      <Post title={post.title} />
    )  
  )
}

const { posts = [] }, чтобы убедиться, что posts является массивом, и не выдает никаких ошибок, таких как cannot read .map of undefined

Или вы можете открыть {} внутри React.Fragment

render() {
  const { posts = [] } = this.state
  return(
    <>
      { 
        posts.map( post => 
          <Post title={post.title} />
        )
      }
    </>    
  )
}

Answer 5

Можете ли вы попробовать это:

async componentDidMount() {     
        const { data } = await axios.get('/api/all')
        this.setState({posts: data, isLoading: false}, () => {
        console.log(this.state.posts)
        return;
    })    
  }

Answer 6

async componentDidMount(){

const res = await axios.get('/api/all')
  this.setState({
  post: res.data
  })
}