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

Question

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

类型错误：无法添加属性 onSearch，对象不可扩展。

我不太熟悉这意味着什么或它为什么出现，我认为这可能与我仍在寻找解决方法的 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;

搜索表单

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; ... 不确定你想在那条线上做什么

Answer 2

将 handleSearch 函数定义更改为 handleSearch = () => {} 胖箭头函数，它将在搜索框文件中正常工作。