react-redux 组件在第一次 API 调用时加载失败答案

【问题标题】：react-redux Component failing to load at the first API callreact-redux 组件在第一次 API 调用时加载失败
【发布时间】：2021-01-12 21:41:11
【问题描述】：

我在 react-redux 中遇到一个问题，我导航到它在第一次 API 调用时崩溃的组件，在页面刷新后它可以正常工作。

  componentDidMount() {
    this.props.getCurrentUser();
    bsCustomFileInput.init();
    if (this.props.response.response) {
      this.setState({
        firstName: this.props.response.response.firstName,
        lastName: this.props.response.response.lastName,
        slug: this.props.response.response.slug,
        email: this.props.response.response.email,
        phoneNumber: this.props.response.response.phoneNumber,
        address: this.props.response.response.address,
        zipcode: this.props.response.response.zipcode,
        aboutYourself: this.props.response.response.aboutYourself
      });
    }
    this.props.updateMyProfileStart();
  }
.........
const mapDispatchToProps = dispatch => {
  return {
    getCurrentUser: () => dispatch(actions.getCurrentUser()),
    onUpdateMyProfile: userData =>
      dispatch(actions.updateMyProfileSuccess(userData)),
    updateMyProfileStart: () => dispatch(actions.updateMyProfileStart())
  };
};

我正在使用 redux-persist 来维护状态。

错误日志

ProfileSettings.js:68 Uncaught TypeError: Cannot read property 'response' of null
    at ProfileSettings.componentDidMount (ProfileSettings.js:68)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)

【问题讨论】：

也许您可以向状态添加一个值，表明用户正在加载，而不是尝试访问尚不存在的状态的数据。使用 mapStateToProps 获取用户和加载状态，它会工作
@HMR 你能扩展一下吗？
有plenty of examples

标签： reactjs redux react-redux

【解决方案1】：

我不确定到底是什么问题，因为我没有看到足够多的代码。但是，对我来说，这听起来像是一个 Promise 问题。可能 getCurrentUser 是异步的，在这种情况下它会返回一个 Promise。

你可以试试：

      componentDidMount() {
        this.props.getCurrentUser()
            .then(() => {
                bsCustomFileInput.init();
                if (this.props.response.response) {
                    this.setState({
                        firstName: this.props.response.response.firstName,
                        lastName: this.props.response.response.lastName,
                        slug: this.props.response.response.slug,
                        email: this.props.response.response.email,
                        phoneNumber: this.props.response.response.phoneNumber,
                        address: this.props.response.response.address,
                        zipcode: this.props.response.response.zipcode,
                        aboutYourself: this.props.response.response.aboutYourself
                    });
                }
                this.props.updateMyProfileStart();
            })

    }

【讨论】：