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

你的destructured setState没问题，你打开了一个(括号需要关闭，或者你可以删除它，因为你的箭头函数中只有一个参数。

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'));

在React中获取箭头函数语法错误

3 个答案: