Javascript 无法添加属性，在React组件中绑定道具时对象不可扩展

出于某种原因，当我尝试将函数绑定到React组件中的一个道具时，它会

TypeError:无法在搜索上添加属性，对象不可扩展

我不太熟悉这意味着什么，也不太清楚它为什么会出现，我认为这可能与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;

从“React”导入React；
从“SearchForm”导入SearchForm；
从“searchDisplay”导入searchDisplay；
从“googleRequests”导入googleRequests；
类SearchBox扩展了React.Component{
构造函数（）{
超级（）；
此.state={
搜索结果：[]
}
this.handleSearch=this.handleSearch.bind（this）；
}
handleSearch（搜索术语）{
googleRequests.search（搜索词）。然后（（响应）=>{
console.log（response.items）；
本.外推结果（响应.项目）；
})，（（错误）=>{
console.log（错误）
});
}
//从api调用中提取相关数据
外推结果（arr）{
功能手册（objInArr）{
this.link=objInArr.selfLink；
this.bookTitle=objInArr.volumeInfo.title；
this.author=objInArr.volumeInfo.authors；
this.bookscription=objInArr.volumeInfo.description；
this.thumboil=函数（）{
if（objInArr.volumeInfo.hasOwnProperty（'imageLinks'））{
返回objInArr.volumeInfo.imageLinks.smallThumbnail
} 
否则{
返回“没有可用的缩略图”；
}
};
this.thumbnailPic=this.thumbnail（）；
}
//将外推数据推送到数组中
var finalRes=[]；
var initRes=arr；
initRes.forEach（函数（objInArr）{
var obj=新书（objInArr）；
最终推送（obj）；
})
这是我的国家({
搜索结果：最终结果
})
console.log（finalRes、this.state.searchResults）
}
render（）{
var res=this.state.searchResults；
函数renderResults（）{
如果（分辨率长度！==0）{
返回（）
}
否则{
返回；
}
}
变量样式={
边框：“1px纯黑”，
身高：80%，
宽度：“83%”
}
返回(
)
}
};
导出默认搜索框；

搜索表单

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;

从“React”导入React；
类SearchForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onFormSubmit=this.onFormSubmit.bind（this）；
this.props.onSearch=props；
}
onFormSubmit（e）{
e、 预防默认值（）；
var searchTerm=this.refs.searchTerm.value；
如果（searchTerm.length>0）{
this.refs.searchTerm.value=''；
this.props.onSearch（搜索术语）；
}
}
render（）{
变量样式={
边框：“1px纯黑”，
浮动：'左'，
高度：“100%”，
宽度：“30%”
}
返回(
);
}
};
导出默认搜索表；

---

我有一种感觉，我错过了一些非常简单的东西，但在谷歌搜索了一段时间后，我仍然无法找出它是什么…

删除

this.props.onSearch=props。。。不确定您想在那一行做什么
将handleSearch函数定义更改为handleSearch=（）=>{}fat arrow函数
它在searchbox文件中可以正常工作。
谢谢，它已经解决了这个问题，但我现在在控制台中收到TypeError“this.props.onSearch不是一个函数”。我认为可能存在更大的问题，但我不知道在哪里。您是否在任何其他未定义onSearch的地方使用
组件。。。？它在您发布的代码中定义。。。在控制台中，它可能会告诉您有关错误发生位置的更多信息。您可以将onSearch调用行更改为
this.props.onSearch&&this.props.onSearch（搜索术语）因此它仅在定义了它时才调用它