javascript - this.someFunction 不是函数

Question

在阅读了绑定(bind)到 React ES6 类的方法的 bind 要求后，我对这个示例仍然遇到一些困难:

class ProductList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
    this.updateState = this.updateState.bind(this);
  }

  componentDidMount() {
    this.updateState();
  }

  handleProductUpvote(productId) {
    Data.forEach((item) => {
      if (item.id === productId) {
        item.votes = item.votes + 1;
        return;
      }
    });
    this.updateState();
  }

  updateState() {
    const products = Data.sort((a,b) => {
      return b.votes - a.votes;
    });
    this.setState({ products });
  }

  render() {
    const products = this.state.products.map((product) => {
      return (
        <Product
          key={'product-' + product.id}
          id={product.id}
          title={product.title}
          description={product.description}
          url={product.url}
          votes={product.votes}
          submitter_avatar_url={product.submitter_avatar_url}
          product_image_url={product.product_image_url}
          onVote={this.handleProductUpvote}
        />
      );
    });
    return (
      <div className='ui items'>
        {products}
      </div>
    );
  }
}

class Product extends React.Component {
  constructor() {
    super();
    this.handleUpvote = this.handleUpvote.bind(this);
  }

  handleUpvote() {
    this.props.onVote(this.props.id);
  }

  render() {
    return (
      <div className='item'>
        <div className='image'>
          <img src={this.props.product_image_url} />
        </div>
        <div className='middle aligned content'>
          <div className='header'>
            <a onClick={this.handleUpvote}>
              <i className='large caret up icon'></i>
            </a>
            {this.props.votes}
          </div>
          <div className='description'>
            <a href={this.props.url}>
              {this.props.title}
            </a>
          </div>
          <div className='extra'>
            <span>Submitted by:</span>
            <img
              className='ui avatar image'
              src={this.props.submitter_avatar_url}
            />
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <ProductList />,
  document.getElementById('content')
);

这会返回

未捕获类型错误:this.updateState 不是 handleProductUpvote 处的函数(...)

在这种情况下初始化的绑定(bind)还不够吗？

Answer 1

每当您看到此问题时，您都不希望将绑定(bind)添加到它当时尝试调用的方法，而是添加到“this.”时您所在的方法。出现“xxx未定义”问题。

目前，它可以很好地获取函数handleProductUpvote - 但它在错误的对象上下文中调用它。因此，您需要执行与构造函数中的 updateState 相同的操作，但使用该函数。尽管我的 react 知识有限，但我相信对用作事件监听器或回调的每个函数执行此操作是很常见的。