我想在应用程序语言更改时重新渲染 antd 选择组件默认值答案

【问题标题】：i want to Rerender antd select component default value on app language change我想在应用程序语言更改时重新渲染 antd 选择组件默认值
【发布时间】：2022-01-26 20:48:56
【问题描述】：

我遇到了 antd 选择项的问题。我正在动态生成选择项，我使用默认值来显示选中/预定义的值，但我的应用程序支持多种语言，所以当我更改我的应用程序语言默认值时不会改变。我附上截图让你充分了解enter image description here

这是我的代码片段

<StyledSelectLarge
        placeholder={item.settings_help_text}
        defaultValue={preSelectDropDowns(item,syslanguage)}
        onChange={(val) => {
          const current = findSetting(item)
          if(current)
          {
            const payload = {
              id: current.id,
              setting_option_id: val,
            };
            
          const updatedValues = values?.filter((item3) => item3?.id !== current?.id);
          fieldValue('dropdownValues', [...updatedValues, payload])
          }
          touchedValue('dropdownValues', true);
        }}
      >
        {item?.settingOptions?.map((item2) => (
          <StyledSelectLarge.Option
            key={item2?.id}
            value={item2?.id}
            item={item2}
          >
            {item2?.translation?.[0]?.translated_text}
          </StyledSelectLarge.Option>
        ))}
      </StyledSelectLarge>

【问题讨论】：

默认值不会改变。改用 value 道具。要了解更多信息，您可以阅读受控和非受控组件以及 defaultProp 的工作原理

标签： javascript reactjs select dropdown antd

【解决方案1】：

您必须每次将defaultValue 替换为value 并将其设置在onChange 中

function DropDown(props) {
   const [dropDownValue, setDropDownValue] = useState(preSelectDropDowns(item, syslanguage));

return (
    <StyledSelectLarge
      placeholder={item.settings_help_text}
      value={dropDownValue}
      onChange={val => {
        const current = findSetting(item);
        if (current) {
          const payload = {
            id: current.id,
            setting_option_id: val,
          };

          const updatedValues = values?.filter(item3 => item3?.id !== current?.id);
          fieldValue('dropdownValues', [...updatedValues, payload]);
        }
        touchedValue('dropdownValues', true);
        setDropDownValue(val) // We set the new value here
      }}
    >
      {item?.settingOptions?.map(item2 => (
        <StyledSelectLarge.Option key={item2?.id} value={item2?.id} item={item2}>
          {item2?.translation?.[0]?.translated_text}
        </StyledSelectLarge.Option>
      ))}
    </StyledSelectLarge>
  );
}

【讨论】：