Question

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

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

selectedCourier是从props设置的，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在初始安装后将不会设置或更改，但是您要在填充选项集时尝试更新选择。

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

1 个答案: