Question

作为免责声明，我是React，Redux和Redux-saga的新手。我正在尝试使用react-material-ui-form-validator实施自定义验证规则。我有一个TextValidator表单字段，用于输入一个人的名字，当输入的名字已经存在时，我希望它返回false。我在componentDidMount()中有一个带有ValidatorForm和自定义规则的React组件，看起来像这样：

class NameCollector extends React.Component {
  constructor(props) {
    super(props);
    const { nameIsUnique} = this.props;
    this.state = {
      nameIsUnique,
    };
  }

  componentDidMount() {
    // custom rule below
    ValidatorForm.addValidationRule('nameIsUnique', () => {
      const { nameIsUnique } = this.state;
      return !nameIsUnique;
    });
  }

  static getDerivedStateFromProps(props, state) {
    if (props.nameIsUnique !== state.nameIsUnique) {
      return {
        nameIsUnique: props.nameIsUnique,
      };
    }
    return null;
  }

  render() {
    const {
      personsName,
      handleNameChange,
    } = this.props;

    const {
      personsName,
    } = this.state;

    return (
  <ValidatorForm>
    <TextValidator
      value={personsName}
      validators={['nameIsUnique']}
      errorMessages={['Name exists already']}
      onChange={
        event => handleNameChange({ personsName: event.target.value })
      }
    />
  </ValidatorForm>
    );
  }
}

问题：验证规则中的nameIsUnique值与通过prop传递到此组件的值保持不同步。在幕后，我正在使用Redux-saga观察程序从Web服务中获取nameIsUnique值。返回值在父组件中异步更新，并作为prop传递给我的NameCollector组件。父容器组件的外观如下：

import React from 'react';
import { connect } from 'react-redux';
import {
  actionTypes,
  updateName,
} from '../../reducers/nameCollector';
import NameCollector from './NameCollector';

class NameCollectorContainer extends React.Component {
  render() {
    const {
      personsName,
      nameIsUnique,
      handleNameChange,
    } = this.props;

    return (
      <NameCollector
        personsName={personsName}
        nameIsUnique={nameIsUnique}
        handleNameChange={handleNameChange}
      />
    );
  }
}

const mapStateToProps = state => ({
  personsName: state.personsName,
  nameIsUnique: state.nameIsUnique,
});

const mapDispatchToProps = dispatch => ({
  handleNameChange: (value) => {
    dispatch(updateName(value));
    dispatch({
      type: actionTypes.FETCH_NAME_EXISTS,
      name: value.personsName,
    });
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(NameCollectorContainer);

我已经确认handleNameChange函数正在分派给我的传奇人物，并且nameIsUnique中映射的mapStateToProps值已成功更新为正确的值。问题是NameCollector子组件在传递给自定义验证时不能正确反映nameIsUnique的值。

在NameCollector子组件的代码中，nameIsUnique值作为prop向下传递，并映射到构造函数内部的React状态。我怀疑这个问题是由于mapStateToProps返回的值的异步性质，以及我不了解的有关React生命周期的事情。您可以在NameCollector组件中看到，我已经尝试通过检查getDerivedStateFromProps来强制更新该状态，以在prop值更新时尝试更新状态。不幸的是，nameIsUnique值似乎总是滞后于我的API请求返回的正确值。我已经通过在验证功能和子组件的render方法内编写console.log语句来确认这一点。

确保我的nameIsUnique状态值始终是最新的正确方法是什么？我想使用react-material-ui-form-validator组件进行此验证以及其他一些验证，但是我不确定我的问题是该组件的局限性还是我使用React和Redux的方式。任何帮助或建议，将不胜感激！

反应状态未在表单验证规则中更新

0 个答案: