Неудачный тип реквизита: недопустимый реквизит `defaultSelected` предоставлен для` TypeaheadContainer (WrappedTypeahead) ` - PullRequest
Новая
       5

Неудачный тип реквизита: недопустимый реквизит `defaultSelected` предоставлен для` TypeaheadContainer (WrappedTypeahead) `

0 голосов
/ 26 марта 2019

Я передаю выбранный элемент в качестве реквизита моему компоненту, который использует response-bootstrap-typeahead, а также загружаю опции в методе componentDidUpdate этого компонента. Я пытаюсь условно добавить свойство defaultSelected, так как оно, похоже, не работает, когда параметры еще не загружены, но я все еще получаю эту ошибку:

Неисправный тип пропеллера: недопустимая опора defaultSelected, поставляемая на TypeaheadContainer(WrappedTypeahead)

selectedCourier устанавливается из реквизита, который является объектом, совпадающим с одним из параметров, возвращаемых из ответа GET courier. Любая помощь? 

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}
/>
)

1 Ответ

0 голосов
/ 27 марта 2019

Оба defaultSelected и selected ожидают массив, но похоже, что props.step.courier является объектом.Попробуйте следующее при определении своего состояния: 

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

Вы также, скорее всего, захотите использовать selected вместо defaultSelected, так как похоже, что это контролируемый компонент.defaultSelected не будет установлен или изменен после первоначального монтирования, но вы пытаетесь обновить выбранные параметры при заполнении набора параметров.

...