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在从子组件返回后未定义

回答

相关问题