React生命周期方法componentDidMount()不能用。

Question

我对React非常陌生，目前正在开发这个hackernews应用。我正在按照《学习react之路》一书中给出的说明来构建这个应用。但是，react生命周期方法componentDidMount()似乎没有工作，因为它里面的console.log没有显示。我已经正确地按照每一个指令进行了操作，并仔细检查了它们。但我还是无法找出原因。任何帮助都将是非常感激的。

我的App.js文件的代码。

import React from 'react';
import './App.css';
const fetch=require("node-fetch");
const DEFAULT_QUERY='redux';
const PATH_BASE='https://hn.algolia.com/api/v1';
const PATH_SEARCH='/search';
const PARAM='query=';
//const url=`${PATH_BASE}${PATH_SEARCH}?${PARAM}${DEFAULT_QUERY}`

function isSearched(searchTerm){
  return function(item){
    return !searchTerm||item.title.toLowerCase().includes(searchTerm.toLowerCase());
  }
}

class App extends React.Component{

  constructor(props){
    super(props);
    this.state={
      result:null,
    searchTerm:DEFAULT_QUERY
    }

    this.fetchTopStories=this.fetchTopStories.bind(this);
    this.setSearchTopStories=this.setSearchTopStories.bind(this);
    this.onDismiss=this.onDismiss.bind(this);
    this.onSearchChange=this.onSearchChange.bind(this);
   }

  setSearchTopStories({result}){
    this.setState({result});
  }

   fetchTopStories(searchTerm){
   fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM}${searchTerm}`)
    .then(response=>response.json())
    .then(result=>this.setSearchTopStories(result));
  }


  onDismiss(id){
      const isNotId=item=>item.ObjectID!==id;
      const updatedList=this.state.list.filter(isNotId);
      this.setState({list:updatedList});
  }

  onSearchChange(event){

    this.setState({searchTerm:event.target.value});
  }

  componentDidMount(){ //NOT WORKING
    console.log("MOUNTED");
    const {searchTerm}=this.state;
    this.fetchTopStories(searchTerm);

  }

  render(){
    const {result,searchTerm}=this.state
    if(!result){return null;}
    return(
     <div className="page">
       <div className="interactions">

       <Search
        value={searchTerm}
        onChange={this.onSearchChange}
       >Search</Search>
       </div>

       <Table 
       list={result.hits}
       pattern={searchTerm}
       onDismiss={this.onDismiss}/>

    </div>
    );
  }

}

const Search=({value,onChange,children})=>{

  return(

    <form>
    {children}<input type="text"
      value={value}
      onChange={onChange}/>
    </form>
  )}


const Table=({list,pattern,onDismiss})=>
  <div className="table">
    {
        list.filter(isSearched(pattern)).map(item=>
        <div key={item.ObjectID} className="table-row">
          <span style={{width:'40%'}}>
            <a href={item.url}>{item.title}</a>
          </span>
          <span style={{width:'30%'}}>{item.author}</span>
          <span style={{width:'10%'}}>{item.comments}</span>
          <span style={{width:'10%'}}>{item.points}</span>
          <span style={{width:'10%'}}>
            <Button onClick={()=>onDismiss(item.ObjectID)}
            className="button-inline">Dismiss</Button>
          </span>
        </div>
      )
    }
    </div>


const Button=({onClick,className='',children})=>{

    return(
      <button
      type="button"
    onClick={onClick}
    className={className}>{children}</button>

    )
  }




export default App;

注意： 忽略onDismiss()函数，它仍然需要一个解决方法。

Answer 1

确保其他一些代码实际上是在创建你的 App 类.Putting console.log 里面 constructor 应该能帮你解决这个问题。

你要找的代码应该是这样的。

ReactDOM.render(<App />, document.getElementById("root"));