Подтвердить что ты не робот

Форма Redux - initialValues ​​не обновляется с состоянием

У меня возникают некоторые проблемы с установкой значений поля inital form с использованием редукционной формы.

Я использую redux-form v6.0.0-rc.3 и реагирую v15.3.0.

Итак, вот моя проблема, у меня есть сетка пользователей, и когда нажимается пользовательская строка, я перехожу на страницу редактирования пользователей и включаю идентификатор пользователей в URL-адрес. Затем на странице редактирования пользователей я захватываю идентификатор и вызываю fetchUser (this.props.params.id), который является создателем действия, который возвращает this.state.users. Затем я пытаюсь установить значения inital значений, вызывая:

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

По моему мнению, это должно установить initialValues ​​для state.users.user, и всякий раз, когда это состояние обновляется, также необходимо обновить initialValues. Это не относится ко мне. InitialValues ​​устанавливается на ранее щелкнув по строке пользователя (то есть в предыдущем состоянии для this.state.users.user). Поэтому я решил проверить это и добавить кнопку к этому компоненту, и когда его щелкнул, я снова вызываю fetchUser с идентификатором пользователя, жестко закодированным в:

this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');

Это правильное обновление состояния, но значения для initialValues ​​не изменяются. Он не обновляется при обновлении состояния. Я тестировал этот тот же самый процесс на более старой версии redux-формы и работал, как ожидалось.

Я делаю что-то неправильно здесь или это проблема с версией, которую я использую.

Редактировать форму пользователя -

class UsersShowForm extends Component {

    componentWillMount() {
        this.props.fetchUser(this.props.params.id);
    }

    onSubmit(props){
        console.log('submitting');
    }

    changeUser() {
        this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
    }

    renderTextField(field) {
        return (
      <TextField 
        floatingLabelText={field.input.label}
        errorText={field.touched && field.error}
        fullWidth={true}
        {...field.input}
      />)
    }

    render() {
        const { handleSubmit, submitting, pristine } = this.props;

        return(

            <div>
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col">

                    <Field name="emailAddress" component={this.renderTextField} label="Email Address"/>

                    <Field name="firstName" component={this.renderTextField} label="First Name"/>

                    <Field name="lastName" component={this.renderTextField} label="Last Name"/>
                </form>

                <RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true} />
            </div>

        );
    }
}

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

UsersShowForm = reduxForm({
  form: 'UsersShowForm'
})(UsersShowForm)

UsersShowForm = connect(
  mapStateToProps,
  actions              
)(UsersShowForm)

export default UsersShowForm

Пользовательский редуктор -

import {
    FETCH_USERS,
    FETCH_USER
} from '../actions/types';

const INITIAL_STATE = { all: [], user: {} };

export default function(state = { INITIAL_STATE }, action) {
    switch (action.type) {
        case FETCH_USERS:
            return {...state, all: action.payload };
        case FETCH_USER:
            return {...state, user: action.payload };
        default:
            return state;
    }

}

Индекс редуктора -

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import usersReducer from './users_reducer';

const rootReducer = combineReducers({
    form: formReducer,
    users: usersReducer
});

export default rootReducer;
4b9b3361

Ответ 1

Я столкнулся с такой же проблемой после обновления до версии redux-form v6.0.0-rc.4.

Я решил установить enableReinitialize в true

UsersShowForm = reduxForm({
  form: 'UsersShowForm',
  enableReinitialize: true
})(UsersShowForm)

Ответ 2

Чтобы предварительно заполнить форму redux-form данными из ресурса, вы должны использовать опору initialValues, которая автоматически читается при украшении компонента/контейнера с помощью разъема reduxForm. Важно, чтобы ключи в initialValues совпадали с name в полях формы.

Примечание. Необходимо сначала применить декоратор reduxForm(), а затем connect() из редукса. Это не будет работать наоборот.

Использование приставки 7.2.3:

const connectedReduxForm = reduxForm({
 form: 'someUniqueFormId',
  // resets the values every time the state changes
  // use only if you need to re-populate when the state changes
  //enableReinitialize : true 
})(UserForm);

export default connect(
  (state) => { 
    // map state to props
    // important: initialValues prop will be read by redux-form
    // the keys must match the 'name' property of the each form field
    initialValues: state.user 
  },
  { fetchUser } // map dispatch to props
)(connectedReduxForm) 

Из официальной документации:

Значения, предоставленные для параметра config initialValues prop или reduxForm(), будут загружены в состояние формы и обработаны после этого как "нетронутые". Они также будут значениями, которые будут возвращены при отправке reset(). Помимо сохранения "нетронутых" значений, при инициализации формы будут перезаписаны все существующие значения.

Найдите дополнительную информацию и полный пример в официальной документации

Ответ 3

В моем случае у меня есть Redux Form, 2 Route с небольшими изменениями параметров URL. При переключении между компонентами реквизиты не обновлялись. Оно показывало пустую форму.

Пример: baseurl/:id/personal -> baseurl/:id/employment

После отладки я обнаружил, что mapStateToProps иногда не запускается, когда установлены начальные значения.

<React.Fragment>
  <Route
    exact={true}
    path="/path1"
    component={PersonalDetails}
    key="personal"
  />
  <Route
    exact={true}
    path="/path1/employment"
    component={Employment}
    key="employment"
  />
</React.Fragment>

установка destroyOnUnmount на false mapStateToProps исправила мою проблему, где по умолчанию установлено значение true.

    enableReinitialize: true,
    destroyOnUnmount: false

Пример использования выше:

UsersShowForm = reduxForm({
  form: 'UsersShowForm',
  enableReinitialize: true,
  destroyOnUnmount: false
})(UsersShowForm)

Подробнее: destroyOnMount