Question

在阅读了关于绑定到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')
);

返回

在Uncaught TypeError: this.updateState is not a function(...)

handleProductUpvote

在这种情况下，初始化的绑定是不够的？

Answer 1

每当您看到此问题时，您都不希望将绑定添加到它尝试调用的方法，但您在其中的方法当＆＃34; this.xxx未定义＆＃34;问题发生了。

目前，它正在使函数handleProductUpvote正常 - 但是它在错误的对象上下文中调用它。因此，您需要在构造函数中执行与updateState相同的操作，但需要使用该函数。虽然我的反应知识有限但我相信，对于用作事件监听器或回调的每个功能来说，这是很常见的。

this.someFunction不是一个函数

1 个答案: