無法添加屬性，對象不是當綁定道具陣營組件

出於某種原因，當我嘗試的功能結合到一個道具在我的陣營組件可擴展的，它是未來與無法添加屬性，對象不是當綁定道具陣營組件

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

我不是太熟悉這個意思或者它出現的原因，我想這可能與es6綁定有關，我仍然可以找到解決方法。

以下是兩個最相關的組件。

搜索框

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;

我有一種感覺，我失去了一些東西很簡單，但谷歌上搜索這個問題了一會兒後，我仍然無法弄清楚什麼它是...

來源

2017-06-05 captain_awesome

刪除this.props.onSearch = props; ...不確定你想在那條線上做什麼

來源

2017-06-05 09:37:58 UXDart

謝謝，它已經解決了這個問題，但我現在正在控制檯中得到TypeError'this.props.onSearch不是函數'。我認爲可能有更大的問題，但我不知道在哪裏。 –

你在沒有定義onSearch的任何其他地方使用''組件嗎？它是在您發佈的代碼中定義的......在控制檯中，它應該告訴您可能有更多關於錯誤發生位置的信息無論如何，您可以將onSearch調用行更改爲'this.props.onSearch && this.props.onSearch （searchTerm）;'所以只有當它被定義時纔會調用它 – UXDart

無法添加屬性，對象不是當綁定道具陣營組件

回答

相關問題