我应该在哪里获取异步数据？

Question

I am fetching data using axios and then map state to props with redux but I have a problem. If I dispatch the action in componentDidUpdate() the action execute indefinitely and if I used the constructor(props) I get undefined value for props so where I should fetch the data?

import React, { Component } from 'react'
import {connect} from 'react-redux'
import { getUserPosts } from '../../actions'

class UserPosts extends Component {

    //UNSAFE_componentWillMount() {

    //}
    constructor(props) {
        super(props);
        console.log(props);
    }


    componentDidUpdate() {
        //this.props.dispatch(getUserPosts(this.props.user_reducer.login?.user._id));
    }

    showUserPosts = (user) => (

        Array.isArray(user.userPosts) ?
          user.userPosts.map((item, i) => (
                <tr key={i}>
                <td>{i}</td>
                <td>author</td>
                <td>date</td>
                </tr>    

          ))
        : null    

    )

    render() {
        let user = this.props.user_reducer;
        //console.log(user.userPosts);
        return (
            <div>
               <div className="user_posts">
                   <h4>Your reviews:</h4>
                   <table>
                       <thead>
                           <tr>
                               <th>Name</th>
                               <th>Author</th>
                               <th>Date</th>
                           </tr>
                       </thead>
                       <tbody>
                           {this.showUserPosts(user)}
                       </tbody>
                   </table>
               </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    //console.log(state);
    return {
        user_reducer: state.user_reducer
    }
}

export default connect(mapStateToProps)(UserPosts)

action:

export function getUserPosts(userId) {
    const req = axios.get(`/api/user_posts?user=${userId}`)
                .then(res => res.data);

    return {
        type: 'GET_USER_POSTS',
        payload: req
    }
}

Answer 1

componentDidMount() is the best placement for the call to fetch.

Here is an example implementation of the axios fetch from componentDidMount():

import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

class UserPosts  extends React.Component {
constructor(props) {
  super(props)

  // Initiate state with an empty array of user posts
  this.state = { userPosts: [] }
}



componentDidMount() {
  axios.get('http://api-url-here')
  .then((response) => {

    // Set the userPosts when data is received.
    // render method will show user posts when state changes

    this.setState({userPosts: response.data})

  })

}

showUserPosts = (user) => (

  Array.isArray(user.userPosts) ?
    user.userPosts.map((item, i) => (
          <tr key={i}>
          <td>{i}</td>
          <td>author</td>
          <td>date</td>
          </tr>    

    ))
  : null    

)

render() {
  let user = this.state;
  //console.log(user.userPosts);
  return (
      <div>
         <div className="user_posts">
             <h4>Your reviews:</h4>
             <table>
                 <thead>
                     <tr>
                         <th>Name</th>
                         <th>Author</th>
                         <th>Date</th>
                     </tr>
                 </thead>
                 <tbody>
                     {this.showUserPosts(user)}
                 </tbody>
             </table>
         </div>
      </div>
  )
}
}




ReactDOM.render(<UserPosts  />, document.getElementById('root'))