使 react-select 2.0.0 <Async> 与 redux-form <Field> 一起工作

Question

react-select 刚刚升级到 2.0.0，所以前三页的 google 结果都是关于旧版本的，甚至 official document 和 none有帮助。

我的 select 框可以正确显示所有选项，但 redux 表单不会提取值，并出现警告：Warning: A component is changing a controlled input of type hidden to be uncontrolled.

我想知道我在这里错过了什么......

表单组件：

<Field
  name="residentialAddress"
  label = "Residential Address"
  type="select"
  component={AddressField}
  validate={required}
/>

组件

export class AddressField extends Component {

    searchAddress = input => {
        let options = []

        return myPromise(input)
        .then(suggestions => {
                options = suggestions.map(suggestion => 
                    ({
                        label: suggestion.label,
                        data: suggestion.value
                    })
                )
                return options;             
            }
        ).catch(
            error => { 
                return options = [{ label: "Auto fetching failed, please enter your address manually", value: "", isDisabled: true }];
            }
        );
    };

    render() {
        const {
            input,
            label,
            meta: { touched, error },
            type
        } = this.props;

        return(
            <FormGroup>
                <ControlLabel>{label}</ControlLabel>
                <Async
                    {...input}
                    placeholder={label}
                    isClearable={true}   
                    getOptionValue={(option) => option.residentialAddress}
                    onChange = { value => input.onChange(value.data) }
                    loadOptions={this.searchAddress}                   
                />
                { touched && error && <span>{error}</span> }
            </FormGroup>
        )
    }

Answer 1

解决方法：只需删除<Async>中的{...input}即可。

与我们需要传入 {input} 的常规自定义 Field 组件不同，react-select 异步组件似乎可以很好地照顾自己，不需要任何干预。有人可能会以更专业的方式解释它......

遇到这个问题的人也值得一提： loadOptions with promise 用于要求对象 {options: options} 作为 return 类型。现在它变成了数组（options 在我的代码中）。但是我没有找到任何提到这个的文档。

希望这对您有所帮助。

使 react-select 2.0.0 <Async> 与 redux-form <Field> 一起工作

Make react-select 2.0.0 <Async> work with redux-form <Field>

react-select

redux-form