У меня есть компонент, связанный с редуктором Redux (languageReducer), который содержит тексты локализации.
Этот компонент содержит локальную переменную («поля», массив jsons), которая отправляется с использованием реквизита дочернему компоненту для визуализации некоторых входных данных. Проблема в том, что при изменении языка из Redux компонент, который отображает эти входные данные, не перерисовывается, потому что он не связан с языковым редуктором, а с объектом, который содержит ключи от языкового редуктора.
Решение будет состоять в том, чтобы переместить это локальное поле в состояние и использовать componentDidUpdate / getDerivedStateFromProps и выполнить быстрое-глубокое-равное в подпорках. Но есть ли более элегантное решение?
class UserForm extends Component {
initialFields = [
{ value: '', type: 'autoCompletionInput', label: this.props.languageReducer.labels.provider, name: 'providerId', options: [] },
{ value: '', type: 'text', label: this.props.languageReducer.labels.name, name: 'username' },
{ value: '', type: 'text', label: this.props.languageReducer.labels.fullName, name: 'fullName' },
{ value: '', type: 'password', label: this.props.languageReducer.labels.password, name: 'password' },
{ value: '', type: 'password', label: this.props.languageReducer.labels.retypePassword, name: 'retypePassword' },
{ value: true, type: 'checkbox', label: this.props.languageReducer.labels.isActive, name: 'isActive'}
]
render(){
return <InputGenerator fields={this.initialFields} />
}
}
const mapStateToProps = reducers => ({
languageReducer: reducers.languageReducer.i18n.user
})
export default connect(mapStateToProps, null)(UserForm)