при использовании {response-select} Не удается прочитать свойство 'name' из неопределенного - PullRequest
0 голосов
/ 05 мая 2019

Я очень начинаю реагировать JS и передний конец

Я добавил в качестве выпадающего меню «Resact-Select Npm», как показано ниже, перед тем как добавить «Resact-Select», все работает нормально. Как определить имя в Select?

<div className="container">
            <div className="row">
              <div className="col-md-4" />
              <div className="col-md-4">
                <Select
                  options={this.state.allGenres}
                  onChange={this.props.onDataChange}
                  name="genre"
                />
              </div>
              <div className="col-md-4" />
            </div>
          </div>

это мой массив,

 var Data = response.data;
    const map = Data.map((arrElement, index) => ({
      label: arrElement,
      value: index
    }));

пример:

[
    {
        "label": "Action",
        "value": 0
    },
    {
        "label": "Comedy",
        "value": 1
    },
    {
        "label": "Documentary",
        "value": 2
    }
]

здесь появляется сообщение об ошибке,

   dataChange(ev, action) {
    this.setState({
      [ev.target.name]: ev.target.value
    });
  }

Render ()

 render() {
    return (
      <Movie
        onPostData={this.postData.bind(this)}
        onDataChange={this.dataChange.bind(this)}
      />
    );
  }

Error

Uncaught TypeError: Невозможно прочитать свойство 'name' из неопределенного на Movies.dataChange

1 Ответ

0 голосов
/ 05 мая 2019

Вы ожидаете, что первый аргумент в методе react-select ´s onChange будет event объектом, но это не так.

Первый аргумент - выбранная опция (или опции, если у вас установлено isMulti). Есть также второй аргумент - object со следующими атрибутами:

  • action: действие, которое вызвало изменение
  • name: имя, данное компоненту Select с использованием name prop.

Так что если вы хотите использовать name:

onDataChange={(value, action) => {
    this.setState({
        [action.name]: value
    })
}}

Ссылка в исходном коде

...