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

我正在使用axios获取数据，然后使用redux将状态映射到道具，但我遇到了一个问题。如果我在

componentdiddupdate（）

中调度操作，操作将无限期执行，如果我使用

构造函数（props）

我将获得

未定义的
props值，那么我应该从何处获取数据

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)

componentDidMount（）是调用获取的最佳位置

以下是axios从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'))

从“React”导入React
从“react dom”导入react dom
从“axios”导入axios
类UserPosts扩展了React.Component{
建造师（道具）{
超级（道具）
//使用空的用户帖子数组初始化状态
this.state={userPosts:[]}
}
componentDidMount（）{
axios.get（）http://api-url-here')
。然后（（响应）=>{
//设置接收数据时的userPosts。
//render方法将在状态更改时显示用户帖子
this.setState（{userPosts:response.data}）
})
}
showUserPosts=（用户）=>(
Array.isArray（user.userPosts）？
user.userPosts.map（（项目，i）=>(
{i}
作者
日期
))
：null
)
render（）{
让user=this.state；
//console.log（user.userPosts）；
返回(
您的评论：
名称
作者
日期
{this.showUserPosts（用户）}
)
}
}
ReactDOM.render（，document.getElementById（'root'））
componentDidMount
用于类组件或使用useffect挂钩用于功能组件-
useffect（（）=>{console.debug（“mounted”）}，[]）
有效负载将是一个承诺。你需要等待承诺的实现。我不知道
user\u reducer
做了什么…@HereticMonkey我正在将我拥有的
user\u reducer
状态映射到一个具有相同属性的道具name@AjeetShah我没有为
this.props.user\u reducer.login定义
您似乎没有正确配置您的操作，reducer。您可以按照post进行更正。当前，您的action creator返回的action的有效负载中包含
承诺
，它应该包含
数据
。我如何使用redux？
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'))