我有一个与 redux 连接的 React 应用。该组件有一个表单，当表单提交时，它会对 api 进行 PUT 调用。当我提交表单时，我可以看到 redux 会相应地更新，但是当我尝试在我的组件中将 redux 状态作为 prop 访问时，props 数据不会返回当前数据并且关闭了 1。例如，这是我的 redux 存储中的数据：

Redux 存储：

当我在组件中执行 console.log("THIS PROPS: ", this.props) 时，我看到它 accountError 显示为 null

当我第二次再次分派动作时，只有那时我才看到我正在从 props 中的 redux 获取数据：

这是我拥有的代码目前:

OrgAccount.js

import { registerOrgAccount, getListOfOrgsAndAccts } from "../../store/actions";

handleSubmit = () => {
  this.props.registerOrgAccount(this.state)
  console.log("THIS PROPS: ", this.props)
  if(this.props.accountError === null) {
    this.toggleTab(this.state.activeTab + 1);
  }
};

<Link
  to="#"
  className="btn w-lg"
  onClick={() => {
    if (this.state.activeTab === 1) {
      this.handleSubmit();
    }
  }}
>
  Next
</Link>

const mapStatetoProps = (state) => {
  const { accounts, accountError, loading } = state.OrgAccount;
  return { accounts, accountError, loading };
};

const mapDispatchToProps = (dispatch) => {
  return {
      getListOfOrgsAndAccts: () => {
        dispatch(getListOfOrgsAndAccts())
    },
     registerOrgAccount: (data) => {
        dispatch(registerOrgAccount(data))
     },
     
  }
}

export default connect(mapStatetoProps, mapDispatchToProps)(OrgAccount);

Reducer:

const initialState = {
    accountError: null, accountsError: null, message: null, loading: null
}

const orgAccount = (state = initialState, action) => {
    switch (action.type) {
        case REGISTER_ORG_ACCOUNT:
            state = {
                ...state,
                account: null,
                loading: true,
                // accountError: null
            }
            break;
       
        case REGISTER_ORG_ACCOUNT_SUCCESSFUL:
            state = {
                ...state,
                account: action.payload,
                loading: false,
                accountError: null
            }
            break;
        case REGISTER_ORG_ACCOUNT_FAILED:
            state = {
                ...state,
                loading: false,
                accountError: action.payload ? action.payload.response : null
            }
            break;
        ...
        default:
            state = { ...state };
            break;
    }
    return state;
}

export default orgAccount;

Action

export const registerOrgAccount = (account) => {
    return {
        type: REGISTER_ORG_ACCOUNT,
        payload: { account }
    }
}

export const registerOrgAccountSuccessful = (account) => {
    return {
        type: REGISTER_ORG_ACCOUNT_SUCCESSFUL,
        payload: account
    }
}

export const registerOrgAccountFailed = (error) => {
    return {
        type: REGISTER_ORG_ACCOUNT_FAILED,
        payload: error
    }
}

Saga.js

import { registerOrgAccountSuccessful, registerOrgAccountFailed, getListOfOrgsAndAcctsSuccessful, getListOfOrgsAndAcctsFailed } from './actions';
import { putOrgAccount } from '../../../helpers/auth_helper';

function* registerOrgAccount({ payload: { account } }) {
    try {
        const response = yield call(putOrgAccount, {
            orgId: account.orgId,
            accountNumber: account.accountNumber,
            accountName: account.accountName,
            accountCode: account.accountCode,
            urlLink: account.urlLink,
            location: account.location,
            accountType: account.accountType,
            address: account.address,
            city: account.city,
            state: account.state,
            zip: account.zip,
            country: account.country,
            email: account.email,
            eula: "blah"
        });
        yield put(registerOrgAccountSuccessful(response));
    } catch (error) {
        yield put(registerOrgAccountFailed(error));
    }
}