pristine 实际是什么时候计算的？它似乎总是正确的，即使形式发生变化

Question

在 redux-form 6.4.2 上，我有以下表单代码：

const renderUsers = ({ fields }) => {
  const table = (
    <table className={styleTable.tbody}>
      <thead className={styleTable.thead}>
        <tr>
          <th>Username</th>
          <th>Roles ('acct purch rec')</th>
        </tr>
      </thead>
      <tbody className={styleTable.tbody}>
        {fields.map((userFieldName /* , index */) => (
          <tr key={userFieldName}>
            <td>
              <Field name={`${userFieldName}.username`} component="input" disabled />
            </td>
            <td>
              <Field name={`${userFieldName}.roles`} component="input" />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );

  return table;
};

class Form extends Component {
  // Ignore state changes with each user update.
  shouldComponentUpdate(nextProps) {
    return JSON.stringify(this.props.initialValues) !==
           JSON.stringify(nextProps.initialValues);
  }

  render() {
    const { loadUsers, handleSubmit, pristine, reset, submitting, invalid } = this.props;
console.log(pristine, invalid, submitting);
    return (
      <form onSubmit={handleSubmit}>

        <Field name="filter"
          component={TextField}
          props={{ floatingLabelText: 'Starting username', autoFocus: true }}
        />
        <RaisedButton label="Filter"
          disabled={submitting}
          className={style.button}
          onClick={() => loadUsers()}
          secondary
        />
        <br />
        <br />

        <FieldArray name="users" component={renderUsers} />
        <br />

        <div>
          <RaisedButton label={submitting ? 'Changing...' : 'Change'}
            disabled={pristine || invalid || submitting}
            className={style.button}
            type="submit"
            primary
          />
          <RaisedButton label="Clear Values"
            disabled={pristine || submitting}
            className={style.button}
            onTouchTap={reset}
            secondary
          />
        </div>

      </form>
    );
  }
}

Form.propTypes = {
  initialValues: PropTypes.object.isRequired,
  loadUsers: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  pristine: PropTypes.bool.isRequired,
  invalid: PropTypes.bool.isRequired,
  reset: PropTypes.func.isRequired,
  submitting: PropTypes.bool.isRequired,
};

我遇到了两个问题：

console.log语句每次输出任何内容时都会输出true false false。我希望这仅在页面首次加载时的第一个输出上出现。
console.log 语句仅在这些点输出一些内容：
1. 页面加载
2. 关注用户角色字段
3. 在筛选字段中输入
4. 按下过滤器按钮
但它在这些点上不输出任何内容：
1. 输入用户角色字段
2. 模糊用户角色字段

我可以从 Redux DevTools 看到状态正在正确更新。例如，我第一次在用户角色字段中按下一个键时，redux 状态差异如下所示：

特别是，在用户角色字段中键入（或至少之后模糊）必须触发渲染，然后 pristine 必须为 false，才能使表单正常工作。由于这些事情都没有发生，表单的提交按钮保持禁用状态。

我只是在同一个问题中问这两个问题，以防有一个简单的原因导致这两个子问题。主要问题是提交按钮总是被禁用，这些子问题正是我能够弄清楚的。

Answer 1

Pristine 计算为每次值更改时 deepEqual(currentValues, initialValues)。

您的问题是您在 shouldComponentUpdate() 中明确忽略了用户更改。删除它，它将起作用。

pristine 实际是什么时候计算的？它似乎总是正确的，即使形式发生变化

When is pristine actually calculated? It seems to always be true, even when the form changes

redux-form