Когда девственный фактически рассчитан? Это, кажется, всегда быть верным, даже когда форма изменяется

Question

На Redux-формы 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. консоль .log выводит true false false каждый раз, когда он выводит что-либо. Я ожидал бы этого только на первом выходе, когда первая страница загружается.

2. console.log заявление выводит только что-то в этих точках:

   1. загрузки страницы
   2. фокус на поле роли пользователя
   3. введите в поле фильтра
   4. нажмите кнопку Фильтр

   , но в этих точках ничего не выводится:

   1. типа в поле роли пользователя
   2. размытости поле пользователя роль

Я могу видеть из Redux Devtools, что состояние становится обновляется должным образом. Например, первый раз, когда я нажать клавишу в поле роли пользователя, перевождь состояние дифф выглядит следующим образом:

В частности, набрав в поле роли пользователя (или по крайней мере размывания впоследствии) будет должны вызвать визуализацию, а затем нетронутой должна быть ложная, чтобы форма работала. Поскольку ни одна из этих вещей не происходит, кнопка отправки формы остается отключенной.

Я только прошу об этом обоих в том же вопросе в случае, если есть одна простая причина, создающая обе эти проблемы. Основная проблема заключается в том, что кнопка отправки всегда отключена, эти под-вопросы - это то, что мне удалось выяснить.

Answer 1

Pristine рассчитывается как deepEqual(currentValues, initialValues) при каждом изменении стоимости.

Ваша проблема в том, что вы явно игнорируете изменения пользователя с помощью вашего shouldComponentUpdate(). Удалите это, и это сработает.