什么时候原始实际计算？即使表单发生变化，它似乎总是如此

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,
};

我遇到了两个问题：

1. 每次输出任何内容时，console.log语句都会输出true false false。我希望这只在页面首次加载时的第一个输出上。

2. console.log语句只输出以下几点：

   1. 页面加载
   2. 专注于用户角色字段
   3. 输入过滤字段
   4. 按下过滤器按钮

   但它在这些点上没有输出任何内容：

   1. 输入用户角色字段
   2. 模糊用户角色字段

   我可以从Redux DevTools看到状态正在正确更新。例如，我第一次按下用户角色字段中的键时，redux状态diff看起来像：

   

   特别是，键入用户角色字段（或者至少在之后模糊）必须触发渲染，然后原始必须为false，以使表单起作用。由于这些事情都没有发生，因此表单的提交按钮会保持禁用状态。

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

Answer 1

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

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