Question

我已将组件绑定到包含本地化文本的Redux reducer（languageReducer）。该组件包含一个局部变量（“ fields”，json数组），该局部变量使用props发送到子组件以呈现一些输入。问题在于，当Redux中的语言发生更改时，呈现这些输入的组件不会重新呈现，因为它没有绑定到Language Reducer，而是绑定到包含Language Reducer的键的对象。

一个解决方案是将本地字段移至状态并使用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)

如何将组件重新渲染绑定到包含React中道具的对象

0 个答案: