Question

我有一个输入框，可以从youtube API中提取数据并输出。结果到目前为止我在输入结果时看到Json但我无法获取任何数据。

父组件

import Searching from "./Searching";

class App extends Component {
  // constructor(props){
  //   super(props);

  //   this.state = {
  //     applications: ""
  //   }
  // }

  yourCallback(searchResults) {
    console.log("searchResults", searchResults); 
  }

  render() {
  // console.log ('this.props', this.props)
    return (
      <div className="App">
        <Searching
           callback={this.yourCallback}
        />
      <br/>
      <h1>{this.searchResults}</h1>
      </div>
    );
  }
}

export default App;

所以，在控制台中我看到了：

理想情况下，我需要创建一个SearchItem组件，然后传递一个包含此API数据的属性，例如videoId或其他内容。但是，我需要看到我可以从中获取数据并在div或h1标记内输出。我做错了什么？，我无法抓住这些数据，甚至很难在控制台中看到它。

Answer 1

只需在Parent组件中管理state并在回调中设置该状态，如下所示：

class App extends Component {
     constructor(props){
      super(props);
       // Maintain a state
       this.state = {
         searchResults: ""
       }
       // Bind yourCallback like this
       this.yourCallback = this.yourCallback.bind(this);
     }

  yourCallback(searchResults) {
    console.log("searchResults", searchResults);
    // set the state with the result
    this.setState({searchResults});
  }

  render() {
  // console.log ('this.props', this.props)
    return (
      <div className="App">
        <Searching
           callback={this.yourCallback}
        />
      <br/>
      // Show that state
      {
       this.state.searchResults 
          ? this.state.searchResults.map((r) => 
             <h1>{r.id.videoId}</h1>) : null;
      </div>
    );
  }
}

Answer 2

＆＃34; TypeError：this.setState不是函数＆＃34;表示您的应用无法找到＆＃34;此＆＃34;。

的引用

您应该将回调函数与上下文绑定。

class App extends Component {
 constructor(props){
  super(props);
   // Maintain a state
   this.state = {
     searchResults: ""
   }
   this. yourCallback = this. yourCallback.bind(this);
 }
 //rest of your code here...
}

我可以在控制台中看到数据，但不能抓住它。 React

2 个答案: