Ответ 1
Я столкнулся с такой же проблемой после обновления до версии redux-form v6.0.0-rc.4.
Я решил установить enableReinitialize в true
UsersShowForm = reduxForm({
form: 'UsersShowForm',
enableReinitialize: true
})(UsersShowForm)
У меня возникают некоторые проблемы с установкой значений поля 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;
Я столкнулся с такой же проблемой после обновления до версии redux-form v6.0.0-rc.4.
Я решил установить enableReinitialize в true
UsersShowForm = reduxForm({
form: 'UsersShowForm',
enableReinitialize: true
})(UsersShowForm)
Чтобы предварительно заполнить форму 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(). Помимо сохранения "нетронутых" значений, при инициализации формы будут перезаписаны все существующие значения.
Найдите дополнительную информацию и полный пример в официальной документации
В моем случае у меня есть 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