失败的道具类型：提供给`TypeaheadContainer（WrappedTypeahead）的无效道具`defaultSelected`

Question

我将所选项目作为prop传递给我的组件，该组件使用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}
/>
)

Answer 1

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

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

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