参数无法访问 - [ts] 找不到名称“产品”

Question

Im trying to add my parameter product to my Button-component

My function handleIncrement has product set as follow:

handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

My onClick event: onClick={() => this.handleIncrement(product)}

And from my understanding should make it reachable in my render() but Typescript is giving me "Cannot find name 'Product'"

Im still at a learning phase for both React and Typescript. Am I doing something wrong or have I got it all wrong?

This is the complete code:

class Counter extends Component {
  state = {
    count: 0,
    tags: ["tag1", "tag2", "tag3"]
  };

  renderTags() {
    if (this.state.tags.length === 0) return <p>No tags!</p>;
    return (
      <ul>
        {this.state.tags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    );
  }

  handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
        {(this.state.tags.length === 0 && "Please create new tag!") ||
          "tags exists"}
        {this.renderTags()}
      </div>
    );
  }

  private getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

Answer 1

In JS, variables can be scoped globally, within a function or within a block, depending on how or where they are declared.

 var globalVar = 1; function example() { var functionVar = 2; if (functionVar) { let blockVar = 3; // let makes a variable "block-scoped" } }

Within any particular scope, you have access to variables defined in that scope but also all scopes above it, up to the global scope (global variables are visible everywhere).

 var globalVar = 1; function example() { // here we also have access to globalVar, since it's in an upper scope var functionVar = 2; if (functionVar) { // here we have access to globalVar and functionVar, since they are both in an upper scope let blockVar = 3; } }

In the render method of your component, you are using a variable named product but you are not defining it anywhere within the scope of render (or in a scope above):

render() {
  return (
    <div>
      {/* ... */}
      <button
        {/* ... */}
        onClick={() => this.handleIncrement(product)}
        {/*                                 ^^^^^^^ not defined anywhere in this scope */}
      >
      {/* ... */}
    </div>
  );
}

Here's an example of how that breaks:

 function render() { console.log(product); } render();