React-select 默认值没有被 React-i18next 翻译

Question

我已经设置了 Select 组件如下

                <Select
                    styles={customStyles}
                    defaultValue={{ label: t('Text to be translated'), value: 'all' }}
                    components={{
                       IndicatorSeparator: () => null,
                        }}
                    isSearchable={isSearchable}
                    options={[
                       { value: 'val1', label: t('text 1') },
                       { value: 'val2', label: t('text 2') },
                       { value: 'val3', label: t('text 3') },
                   ]}
                   onChange={handleSelectChange}
                   isDisabled={disabled}
                />

my defaultValue 仅在第一次加载组件时翻译。更改语言不会以任何方式影响。文本以初始加载时选择的语言显示。但有趣的是 - 选项的翻译完全没有问题

Answer 1

您应该将密钥作为参数传递给您的 Select 元素。确保它是唯一值，我认为 defaultValue 中的 label 对它有好处。引用自下方官方文档

Keys help React identify which items have changed, are added, or are removed.

React-select 默认值没有被 React-i18next 翻译

React-select default value is not being translated with React-i18next

internationalization

reactjs

react-select