Когда ты инициализируешь state компонента из props в конструкторе, state становится отвязан от изменений props. Если родительский компонент передаст новые значения props, дочерний компонент не отразит эти обновления, потому что конструктор выполняется только один раз при создании компонента.
Конструктор выполняется один раз, когда компонент монтируется. Все последующие изменения props от родительского компонента игнорируются, потому что state уже инициализирован и пересчитываться не будет.
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
inputValue: this.props.inputValue
};
}
render() {
return <div>{this.state.inputValue}</div>
}
}
В этом примере, если prop inputValue изменится, компонент не обновится, потому что он ссылается на this.state.inputValue вместо текущего prop.
Обращайся к props напрямую в методе render():
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = { records: [] }
}
render() {
return <div>{this.props.inputValue}</div>
}
}
Так компонент всегда будет показывать актуальное значение prop.
Для функциональных компонентов с React Hooks используй useState с prop в качестве начального значения, а затем синхронизируй через useEffect:
const MyComponent = ({ inputValue }) => {
const [value, setValue] = useState(inputValue);
useEffect(() => {
setValue(inputValue);
}, [inputValue]);
return <div>{value}</div>;
};
Не инициализируй state из props, если тебе не нужна независимая копия, которой не нужно следить за изменениями props.
Когда состояние компонента инициализируется из props в конструкторе, последующие изменения props автоматически обновят компонент, потому что React перезапускает конструктор при каждом изменении props.
Новый — ещё не проверен сообществом
Вы