Получение ошибки о том, что «name.split не является функцией» - PullRequest
Новая
       11

Получение ошибки о том, что «name.split не является функцией»

0 голосов
/ 12 ноября 2018

Я пытаюсь проанализировать однопользовательский ввод, но выдает ошибку , заявляющую:

Необработанный отказ (TypeError): name.split не является функцией

Когда я пытаюсь найти имя создателя, например, Frank Miller, он выдает эту ошибку. 

class Creators extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comics: []
    };
  }

  byCreator = async name => {
    var names = name.split(" ");
    var firstName = names[0];
    var lastName = names[1];
    await fetch(
      `https://gateway.marvel.com:443/v1/public/creators?firstName=${firstName}%20&lastName=${lastName}&apikey=117b458635106b9721749634b53fb07b`
    )
      .then(res => res.json())
      .then(json => {
        const creatorID = json.data.results[0].id;
        return fetch(
          `https://gateway.marvel.com:443/v1/public/comics?creators=${creatorID}&apikey=117b458635106b9721749634b53fb07b`,
          { cache: "force-cache" }
        );
      })
      .then(res => res.json())
      .then(d => this.setState({ comics: d.data.results }));
  };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <div>
        <div>
          <input
            type="search"
            placeholder="creator"
            value={this.state.value}
            onChange={this.handleChange}
          />
          <button onClick={this.byCreator}>Search</button>
        </div>

        <ul>
          {this.state.comics.map(c => (
            <li key={c.id}>
              <p> {c.title} </p>
              <p> {c.description} </p>
              <img src={c.thumbnail.path + "." + c.thumbnail.extension} />
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 12 ноября 2018

Вам нужно создать дескриптор для нажатия кнопки, и вызов byCreator передает значение параметру name: 

handleClick: event => {
    const valueForNameParam = this.state.value; // or any other string
    this.byCreator(valueForNameParam);
}

тогда вам нужно привязать вашу новую функцию (и существующую функцию handleChange) к экземпляру объекта в конструкторе: 

constructor(props) {
    super(props);

    this.state = {
        comics: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
}

Наконец, вам нужно изменить привязку события нажатия кнопки с функции byCreator на функцию handleClick: 

<button onClick={this.handleClick}>Search</button>

Если вы сделаете это, сообщенная ошибка будет устранена.

...