失败的道具类型：提供给“TypeaheadContainer（WrappedTypeahead）”的无效道具“defaultSelected”答案

【问题标题】：Failed prop type: Invalid prop `defaultSelected` supplied to `TypeaheadContainer(WrappedTypeahead)`失败的道具类型：提供给“TypeaheadContainer（WrappedTypeahead）”的无效道具“defaultSelected”
【发布时间】：2019-03-26 17:40:29
【问题描述】：

我将所选项目作为道具传递给我的组件，该组件利用 react-bootstrap-typeahead 以及加载该组件的 componentDidUpdate 方法中的选项。我正在尝试有条件地添加“defaultSelected”属性，因为在尚未加载选项时它似乎失败了，但我仍然收到此错误：

失败的道具类型：无效的道具defaultSelected提供给TypeaheadContainer(WrappedTypeahead)

selectedCourier 是从 props 设置的，它是一个与 GET couriers 响应返回的选项之一匹配的对象。有什么帮助吗？

constructor(props) {
    super(props);

    this.state = {
        step: props.step,
        selectedCourier: props.step.courier && props.step.courier.courierId ? props.step.courier : null,
        submitMessage: props.step.courier && props.step.courier.submitMessage ? props.step.courier.submitMessage : '',
        couriers: []
    };
}

componentDidMount = () => {
    nprogress.start();
    nprogress.configure({showSpinner: false, easing: 'ease', speed: 500});
    axios
        .get('/Couriers')
        .then(response => {
            console.log(this.state);
            this.setState({couriers: response.data});
            nprogress.done()
        })
        .catch(function (error) {
            nprogress.done()
        });
    console.log(this.state);
};

render() {
    var inputProps = {};

    if (this.state.selectedCourier != null && this.state.couriers.length > 0) {
        inputProps.defaultSelected = this.state.selectedCourier
    }
    return (
...
<Typeahead
 onInputChange={this.handleCourierSearchChange}
 labelKey="name"
 options={this.state.couriers}
 placeholder="Search couriers..."
 onChange={selected => {
     this.selectCourier(selected);
 }}
 id="courierSearch"
 ref={(ref) => this._typeaheadCouriers = ref}
 {...inputProps}
/>
)

【问题讨论】：

标签： reactjs typeahead react-bootstrap-typeahead

【解决方案1】：

defaultSelected 和 selected 都需要一个数组，但看起来 props.step.courier 是一个对象。在定义状态时尝试以下操作：

this.state = {
  ...
  selectedCourier: props.step.courier && props.step.courier.courierId ? [props.step.courier] : [],
};

您也很可能希望使用selected 而不是defaultSelected，因为它看起来像是一个受控组件。 defaultSelected 不会在初始装载后设置或更改，但您正在尝试在填充选项集时更新选择。

【讨论】：