React.js Форма ввода onChange имеет проблему с getDerivedStateFromProps
Вход onChange не обновляет состояние при использовании getDerivedStateFromProps. После того, как я передал реквизиты от родителя к потомку, я проверяю getDerivedStateFromProps из дочернего компонента. Полная демонстрация - https://codesandbox.io/s/011m5jwyjw
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
form: {}
};
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.user) {
return { form: nextProps.user };
}
return {
...prevState
};
}
inputHandle(e) {
this.setState(prevState => ({
...prevState,
form: {
firstname: e.target.value
}
}));
}
render() {
return (
<input
type = "text"
name = "firstname"
value = {this.state.form.firstname}
onChange = {e => this.inputHandle(e)}
/>
);
}
}
Также обратите внимание, что вам, вероятно, даже не стоит использовать этот метод: reactjs.org/blog/2018/06/07/…
Также обратите внимание: обновление состояния всегда частичное, а не полное, поэтому возвращать prevState не нужно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Начиная с React 16.4, вызывается getDerivedStateFromProps, который получает свойства компонента при каждом обновлении, независимо от того, что его вызвало (изменение свойств или состояния). Поэтому каждый раз, когда вы вызываете this.setState, значения формы сбрасываются с помощью этого кода:
if (nextProps.user) { // nextProps are here on every state change
return { form: nextProps.user };
}
Чтобы исправить это, сохраните текущего пользователя в состоянии и сбросьте атрибут состояния form только при изменении пользователя.
this.state = {
form: {},
lastUser: null,
};
// ...
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.user !== prevState.lastUser) {
return {
form: nextProps.user,
lastUser: nextProps.user
};
}
return {};
}
Это работает, как ожидалось. Вы знаете, как это сделать без метода getDerivedStateFromProps?
@Mifas Вы можете сделать компонент Form полностью управляемым и сохранить состояние формы в компоненте List
«Не работает» - неправильное описание проблемы. Пожалуйста, объясните, что происходит и чего вы ожидаете