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

Question

For some reason when I try to bind a function to a prop in my React component, it is coming up with

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

I am not too familiar with what this means or why it is appearing, I think it may be to do with the es6 bindings which I am still finding my way around on.

Here are the two most relevant components.

Searchbox

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;

I have a feeling I am missing something very simple but after googling this issue for a while I still can't figure out what it is...

Answer 1

remove this.props.onSearch = props; ... not sure what you wanted to do there on that line

Answer 2

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