Question

使用redux道具在componentDidMount（）内部触发动作的最佳方法是什么？例如：

import { fetchUser } from '../actions'
    class Example extends Component {
          ComponentDidMount(){
            this.props.fetchUser(this.props.id)
          } ... 

mapDispatchToProps = dispatch => ({
   fetchUser: (payload) => dispatch(fetchUser(payload))
})

mapStateToProps = state => ({
 id: state.user.id
})

问题在于在类甚至从商店接收道具之前就已安装ComponentDidMount（）。这样，我的this.props.id在方法内='undefined'。我发现的一种解决方案是按以下方式运行，但我不知道这是否是最佳方法：

    import { fetchUser } from '../actions'
        class Example extends Component {
     fetchUser = () => {
     this.props.fetchUser(this.props.id)
              }
render(){
  if(this.props.id !== undefined) this.fetchUser()
 } ...
}

    mapDispatchToProps = dispatch => ({
       fetchUser: (payload) => dispatch(fetchUser(payload))
    })

    mapStateToProps = state => ({
     id: state.user.id
    })

那样我可以得到请购单，但我认为这不是最好的方法。有什么建议吗？

Answer 1

您是否尝试过使用异步/等待？

async ComponentDidMount(){
 await this.props.fetchUser(this.props.id)
} ...

Answer 2

您必须了解React组件的生命周期。装入组件后，它可以获取数据，但是此时您的组件需要渲染某些内容。如果尚未加载数据，您应该返回null来告诉React它此时未呈现任何内容，或者返回一个加载指示器以表明它正在获取数据？

import { fetchUser } from '../actions'

class Example extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }
    render(){
        const { loading, error, user } = this.props;

        if (loading) {
            return <LoadingIndicator />;
        }

        if (error) {
            return <div>Oh noes, we have an error: {error}</div>;
        }

        // Render your component normally
        return <div>{user.name}</div>;
    }
}

您的reducer默认情况下应将加载设置为true，并且在获取完成时，将load设置为false，然后根据获取失败/完成情况来设置用户或错误。

在componentDidMount中调度一个动作，该动作接收redux道具作为有效载荷

2 个答案: