Ошибка синтаксиса функции стрелки

Question

У меня есть следующий код, который представляет приложение React.

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list'

const API_KEY = 'AIzaSyCF7K58Xwpr7m5C0yGy8Bck02iQ0fJ2yuI';


class App extends React.Component {

  constructor(props){

    super(props);

    this.state = {videos: []};

    this.YTSearch = this.YTSearch.bind(this);
  }

  YTSearch({key: API_KEY, term: BMW}, (videos => {
    this.setState({ videos });
  });
);

  render() {
    return (
      <div>
        <SearchBar />
        <VideoList videos={ this.state.videos }/>
      </div>
    );
  }
}


ReactDOM.render(<App />, document.querySelector('.container'));

Также я думаю, что у меня есть некоторая синтаксическая проблема с использованием функции setState.

Могу ли я получить помощь? Спасибо.

Answer 1

Class тело для определения функций и переменных, но вы вызываете функцию YTSearch внутри тела класса, которое дает синтаксическую ошибку. Если вы хотите вызвать функцию, то вызовите ее либо внутри конструктора, либо внутри любой другой функции, например componentDidMount и т. Д.

constructor(props){
    super(props);
    this.state = {videos: []};
  }

componentDidMount(){
   // Call it here inside componentDidMount or any other function
    YTSearch({key: API_KEY, term: BMW}, (videos => {
      this.setState({ videos });
    }));
}

Answer 2

Ваш деструктурированный setState в порядке, у вас есть скобка (open, который должен быть закрыт, или в любом случае вы можете удалить его, так как в вашей функции стрелки есть только один аргумент.

Answer 3

Ваша конкретная проблема не прояснена в вашем вопросе, но, глядя на ваш код, я предполагаю, что ваш YTSearch никогда не запускается, и поэтому ваше состояние никогда не устанавливается с помощью списка видео.

Если вы пытаетесь создать метод для перехода на панель поиска, которая запускает поиск, попробуйте что-то вроде этого. Надеюсь, это поможет!

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';

const API_KEY = 'AIzaSyCF7K58Xwpr7m5C0yGy8Bck02iQ0fJ2yuI';

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

    this.state = { videos: [] };

    this.search = this.search.bind(this);
  }

  search(phrase) {
    YTSearch({ key: API_KEY, term: phrase }, videos => {
      this.setState({ videos });
    });
  }

  render() {
    return (
      <div>
        <SearchBar onSearch={this.search}/>
        <VideoList videos={this.state.videos} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('.container'));