如何从.Map函数Re​​act内部更改状态

Question

I have this function

renderCompanies() {
    if (this.props.companies)
      return [
        <div>
          Dashboard hello <div>{this.renderProfile()}</div>
          <div>
            {this.props.companies.map(function(item, i) {
              return (
                <div>
                  <div
                    key={i}
                    onClick={item => {
                      this.setState({ currentCompany: item });
                    }}
                  >
                    {i}: {item.name}
                  </div>

                  <button>Delete Company</button>
                </div>
              );
            })}
          </div>
          <AddCompanyPopUp />
        </div>
      ];
  }

I want to loop though this.props.companies and render a list of items. I want a user to be able to click on a specific item and have the item be saved to state.

This function runs inside another funtion

renderEitherMenuOrCompanyList() {
    if (this.state.currentCompany) {
      return <Menu companies={this.state.currentCompany} />;
    } else {
      return <div>{this.renderCompanies()}</div>;
    }
  }

Both are already bound to this

this.renderCompanies = this.renderCompanies.bind(this);
this.renderProfile = this.renderProfile.bind(this);
this.renderEitherMenuOrCompanyList = this.renderEitherMenuOrCompanyList.bind(this)

The renderEitherMenuOrCompanyList function is being called inside the render react function/method.

My problem is that I cannot set the state from the renderCompanies .map function. I keep getting "Cannot read property 'setState' of undefined" . This should be simple but I have not been able to do it

Answer 1

Make sure the function given to map is bound as well, or an arrow function:

{this.props.companies.map((item, i) => {
  return (
    <div>
      <div
        key={i}
        onClick={() => {
          this.setState({ currentCompany: item });
        }}
      >
        {i}: {item.name}
      </div>

      <button>Delete Company</button>
    </div>
  );
})}

Answer 2

The function passed to this.props.companies.map isn't an arrow function, so it creates a new this . Change it to an arrow function to preserve the this from outside of it.

this.props.companies.map( ( item, i ) => { ... } )

You've also named the argument to onClick item , but it's actually the click event. You want the item already defined by the map function. Name the argument to onClick something else, or nothing, to avoid overwriting the item variable you actually want.

onClick={ () => { ... } }