使用 redux 形式时，初始值未显示在 react-select 中

Question

我正在为 select 字段使用 react-select。我已经以这种格式将选项传递给它，因为 react-select 支持这种方式

export const statusList = [
  { value: 1, label: 'Active' },
  { value: 2, label: 'Paused' },
];

但是当我从 api 中获取值时，它是这样的 client_id: 2。

我现在应该如何预填 select 字段？我做了以下方式

const InputTextWithSearch = ({ children, input, options, isMulti, ...props }: Props) => {
  console.log('input value', input, options);
  return (
    <Wrapper className={props.className} style={{ width: '100%' }}>
      <Label>{props.label}</Label>
      {children}
      <Select
        {...props}
        clearable={props.clearable}
        isSearchable={false}
        options={options}
        {...input}
        onChange={input.onChange}
        onBlur={() => input.onBlur(input.value)}
        components={{
          DropdownIndicator: props.selectIcon || DropdownComponent,
        }}
        styles={SelectStyleSetting}
        isMulti={isMulti}
      />
    </Wrapper>
  );
};

initialvalues is like {client_id: 2}

<Field
   id="client-id"
   name="client_id"
   label="Client Name"
   placeholder="Select Client"
   className="input-field"
   component={GSearchSelect}
   options={clients}
   onChange={handleSelectChange('client_id')}
   disabled={!!company}
/>

Answer 1

来自 react-select 文档

value props - The value of the select; reflected by the selected option

One of <Object,Array<Object>,null,undefined
>

您必须传递作为 Select 组件的选项道具或 null/undefined 空 selection

提供的对象数组的一部分的对象

具体到你的情况，你应该通过

 { value: 2, label: 'Paused' },

作为值而不是 {client_id: 2}

使用 redux 形式时，初始值未显示在 react-select 中

initialvalues is not shown in react-select when using with redux form

javascript

reactjs

redux-form

react-select