Question

我正在尝试制作一项功能，检查已输入的电子邮件是否已与redux一起使用。我不确定为什么我的商店状态似乎落后于一个州。我怀疑这可能是我的承诺的竞争条件，但我不确定这是发生在哪里。这就是我的商店状态稍后改变价值的原因，也是开发人员工具输出无序的原因。

情景1：

输入已收到的电子邮件：

{}                    <-- expected {exist: true}
value: true

输入已收到的电子邮件：
```
{exist: true}
value: true
```

输入未收到的电子邮件：

{exist: true}         <-- expected {exist: false}
value: false

输入未收到的电子邮件：
```
{exist: false}
value: false
```

有时情景1中相同步骤的结果是不同的：

情景1（不同结果）：

输入已收到的电子邮件：
```
{}
value: true
```
输入已收到的电子邮件：
```
value: true
{exist: true}
```

请注意开发人员工具中输出的顺序是如何不同的。

情景2：

输入未收到的电子邮件：

{}                    <-- expected {exist: false}
value: false

输入未收到的电子邮件：

{exist: false}               
value: false

输入已收到的电子邮件：

{exist: false}        <-- expected {exist: true}
value: true

输入已收到的电子邮件：
```
{exist: true}
value: true
```

组件方法：

checkEmailExist(event) {
    const email = event.target.value;
    if (email !== "") {
      this.setState({isEmailTaken: "pending"}, () => {
        this.props.actions.checkEmailExist(email).then(() => {
          console.log(this.props.isEmailTaken);
        }).catch(err => {});
      });
    }
  }

mapDispatchToProps曾用于允许访问我的所有操作。包含checkEmailExist操作

const mapDispatchToProps = dispatch => {
  return {actions: bindActionCreators(createAccountActions, dispatch)};
};

mapStateToProps用于将商店状态存入this.props，具体而言，isEmailTaken

const mapStateToProps = (state, ownProps) => {
  return {
    createdAccount: state.createdAccount,
    isEmailTaken: state.isEmailTaken
  };
};

checkEmailExist行动：

export function checkEmailExist(email) {
  const headers = new Headers({"Content-Type": "text/plain; charset=utf-8"});
  const options = {method: 'GET', headers};
  return dispatch => {
    return fetch(`${apiEndpoints.CHECK_EMAIL_EXIST_ENDPOINT}/${email}`, options).then(res => {
      if (res.ok) {
        res.json().then(v => {
          console.log("value: " + v);
          return dispatch(emailExists(v));
        });
      } else {
        console.log("res no okay");
      }
    }).catch(error => {});
  };
}

emailExists行动：

export function emailExists(v) {
  return {
    type: (v ? types.EMAIL_EXISTS : types.EMAIL_DOES_NOT_EXIST)
  };
}

减速机：

export default (state={}, action={}) => {
  switch(action.type) {
    case types.EMAIL_DOES_NOT_EXIST:
      return {exist: false};
    case types.EMAIL_EXISTS:
      return {exist: true};
    default: return state;
  }
};

所有减速机都与：

export default combineReducers({
  isEmailTaken,
  ...
});

Redux商店无法检查电子邮件是否存在功能

0 个答案: