は、プロパティを追加することはできません私は私の中に小道具に関数をバインドしようとすると、中に結合小道具が何らかの理由でコンポーネント

Question

を反応すると、オブジェクトは拡張可能ではないコンポーネントを反応して、それが

TypeError: Can't add property onSearch, object is not extensible.

を考え出すされて私はないですそれが何を意味するのか、なぜそれが出現しているのか、あまりにもよく知られていますが、私はまだ私の周りに自分の道を見いだしているes6バインディングと関係していると思います。

ここに2つの最も関連性の高いコンポーネントがあります。

検索ボックス

import React from 'react'; 

import SearchForm from 'SearchForm'; 
import searchDisplay from 'searchDisplay'; 
import googleRequests from 'googleRequests'; 

class SearchBox extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     searchResults: [] 
    } 
    this.handleSearch = this.handleSearch.bind(this); 


} 
handleSearch(searchTerm) { 
    googleRequests.search(searchTerm).then((response) => { 
     console.log(response.items); 
     this.extrapolateResults(response.items); 
    }), ((error) =>{ 
     console.log(error) 
    }); 
} 
//pull relevant data out of api call 
extrapolateResults(arr) { 
    function Book(objInArr) { 
     this.link = objInArr.selfLink; 
     this.bookTitle = objInArr.volumeInfo.title; 
     this.author = objInArr.volumeInfo.authors; 
     this.bookDescription = objInArr.volumeInfo.description; 
     this.thumbnail = function() { 
      if (objInArr.volumeInfo.hasOwnProperty('imageLinks')){ 
      return objInArr.volumeInfo.imageLinks.smallThumbnail 
     } 
     else { 
      return "No Thumbnail Available"; 
     } 
    }; 
     this.thumbnailPic = this.thumbnail(); 
} 
//push extrapolated data into array 
var finalRes = []; 
var initRes = arr; 
    initRes.forEach(function (objInArr) { 
     var obj = new Book(objInArr); 
     finalRes.push(obj); 
    }) 
this.setState({ 
    searchResults: finalRes 
}) 
console.log(finalRes, this.state.searchResults) 

} 


render() { 
    var res = this.state.searchResults; 

    function renderResults() { 
     if (res.length !== 0) { 
      return (<SearchDisplay content={res} />) 
     } 
     else { 
      return; 
     } 
    } 

    var style = { 
     border: '1px solid black', 
     height: '80%', 
     width: '83%' 
    } 
    return (
     <div style={style}> 
      <SearchForm onSearch={this.handleSearch}> </SearchForm> 
     </div>) 
} 
}; 

export default SearchBox; 

Searchform

import React from 'react'; 

class SearchForm extends React.Component { 
constructor(props) { 
    super(props); 
    this.onFormSubmit = this.onFormSubmit.bind(this); 
    this.props.onSearch = props; 
} 
onFormSubmit(e) { 
    e.preventDefault(); 
    var searchTerm = this.refs.searchTerm.value; 
    if (searchTerm.length > 0) { 
     this.refs.searchTerm.value = ''; 
     this.props.onSearch(searchTerm); 
    } 
} 

render() { 
    var style = { 
     border: '1px solid black', 
     float: 'left', 
     height: '100%', 
     width: '30%' 
    } 

    return(
     <div style={style} className="container"> 
      <form onSubmit={this.onFormSubmit}> 
       <input type="text" placeholder="search name here" ref="searchTerm"/> 
       <input type="submit" className="button" value="Get Book"/> 
      </form> 
     </div> 
     ); 
} 
}; 

export default SearchForm; 

私は非常に単純な何かをしないのですが、しばらくの間、この問題をグーグル後、私はまだ何を把握することはできません感じていますそれは...

Answer 1

削除this.props.onSearch = props; ...わからないその行で何をしたかったのですか？