React組件方法this.state.myState在從子組件返回後未定義

我在React中有一個父組件（BookApplication）和一個子組件（SearchBox）。 SearchBox有一個輸入字段，並應該將輸入返回給父級以處理事件。這工作正常，但是當我回到方法handleSearch中的父組件時，this.state...未定義。React組件方法this.state.myState在從子組件返回後未定義

TypeError: Cannot read property 'books' of undefined

但searchInput有它應該有的值。但我需要從this.state.books書籍再次：/ 我明白，在方法handleSearch我工作在它的範圍內，所以this....是handleSearch的上下文...但我怎麼得到它的組件的參數BookApplication呢？我仍然在學習JavaScript，我認爲這不應該是一個問題，因爲一個函數總是可以使用它的父對象的變量？

class BookApplication extends React.Component { 

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

    componentDidMount() { 
     $.get(PATH, function (result) { 
      this.setState({ 
       books: result 
      }); 
     }.bind(this)); 
    } 

    handleSearch(searchInput) { 
     //Sort the books list 
     var sortedList = []; 
     this.state.books.map(
      function (currentBook) { 
       currentBook.keys().forEach(
        function (key, pos) { 
         if (key.contains(searchInput)) { 
          sortedList.push(currentBook) 
         } 
        } 
       ) 
      } 
     ); 
    } 

render() { 
     return (
      <div> 
       <SearchBox onSearch={this.handleSearch}/> 
       <div className="book-list"> 
        {this.state.books.map(function (currentBook) { 
         return <Book book={currentBook} key={currentBook.id}/>; 
        }) } 
       </div> 
      </div> 
     ); 
    }

這裏也是我的搜索盒：

class SearchBox extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {searchFieldInput: ''}; 
    this.handleSearchChange = this.handleSearchChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
} 

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

handleSubmit(e) { 
    //Prevent the browser's defeault action of submitting the form 
    e.preventDefault(); 

    var searchFieldInput = this.state.searchFieldInput.trim(); 
    //Call the passed callback function 
    this.props.onSearch({searchFieldInput: searchFieldInput}); 
} 

render() { 
    return (
     <div className="book-search"> 
      <input 
       type="text" 
       value={this.state.searchFieldInput} 
       onChange={this.handleSearchChange} 
       placeholder="Search..." 
       className="search-bar" 
      /> 
      <button onClick={this.handleSubmit} className="search-button">Search</button> 
     </div> 
    ); 
}

}

來源

2016-10-22 binarykitten

看起來像有人直接操作狀態，而的setState –

我是用[Facebook的教程]（HTTPS工作：//facebook.github。 io/react/docs/forms.html）本身！：D – binarykitten

如果你的問題是如何從子組件父母的背景，然後嘗試

class ParentComponent extends React.Component { 
    ... 
    ... 
    clickHandler(event){} 

    render(){ 
     <ChildComponent parent={this}/> 
    } 
} 

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

    render(){ 
     let parent = this.props.parent; 
     return <button onClick={parent.clickHandler}></button> 
    } 
}

，你會得到這裏有錯誤

componentDidMount() { 
    $.get(PATH, function (result) { 
     this.setState({ 
      books: result 
     }); 
    }.bind(this)); 
}

因爲回調函數中的this沒有引用您的組件的上下文。你應該保持組件的上下文中的變量

componentDidMount() { 
    let self = this; 
    $.get(PATH, function (result) { 
     self.setState({ 
      books: result 
     }); 
    }.bind(this)); 
}

最後的決定是

constructor(props) { 
    super(props); 
    this.state = {books: []}; 
    //add the following line into your code 
    this.handleSearch = this.handleSearch.bind(this); 
}

來源

2016-10-22 09:42:40

不，我已經回到它的方法'handleSearch'中的父組件的輸入的子組件。但父母的狀態似乎不再可用。我需要'this.state.books'再次，我在開始加載。 – binarykitten

但是我不會在componentDidMount方法中出現錯誤... REST工作得很好。當我的應用程序啓動時，我加載書籍並顯示它們（使用this.state.books）。這沒有問題。比我寫一個字符串來搜索我的嵌套輸入字段（SearchComponent）。當我從搜索組件返回到父組件時，我無法從this.state.books – binarykitten

再次獲取書籍。將this.handleSearch = this.handleSearch.bind（this）添加到您的「構造函數」中。 –

React組件方法this.state.myState在從子組件返回後未定義

回答

相關問題