javascript - React - set state using button and pass it as props - Stack Overflow

admin管理员组

文章数量:1406144

I want to use the 'pare' button to toggle the pare state to true or false. Next I want to pass this pare state to pivot as props.

I am literally using the same code as in the react documentation when looking at the Toggle class. .html The only thing I changed is the name isToggleOn to pare.

When looking at the console client side I get following error every time the ponent renders:

modules.js?hash=5bd264489058b9a37cb27e36f529f99e13f95b78:3941 Warning: setState(...): Cannot update during an existing state transition (such as within render or another ponent's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to ponentWillMount.`

My code is following:

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { pare: true };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(button) {
    if (button === 'pare') {
      this.setState(prevState => ({
        pare: !prevStatepare,
      }));
    }
  }

  render() {
    return (
      <Grid>
        <div className="starter-template">
          <h1>This is the dashboard page.</h1>
          <p className="lead">
            Use this document as a way to quickly start any new project.<br />{' '}
            All you get is this text and a mostly barebones HTML document.
          </p>
        </div>

        <ButtonToolbar>
          <button onClick={this.handleClick('pare')}>
            {this.statepare ? 'AGGREGATE' : 'COMPARE'}
          </button>
        </ButtonToolbar>

        <PivotTable
          ready={this.props.isReady}
          data={this.props.gapData}
          pare={this.statepare}
        />
      </Grid>
    );
  }
}

export default (DashboardContainer = createContainer(() => {
  // Do all your reactive data access in this method.
  // Note that this subscription will get cleaned up when your ponent is unmounted
  const handle = Meteor.subscribe('weekly-dashboard');

  return {
    isReady: handle.ready(),
    gapData: WeeklyDashboard.find({}).fetch(),
  };
}, Dashboard));

Any advice on how to fix this?

I want to use the 'pare' button to toggle the pare state to true or false. Next I want to pass this pare state to pivot as props.

I am literally using the same code as in the react documentation when looking at the Toggle class. https://facebook.github.io/react/docs/handling-events.html The only thing I changed is the name isToggleOn to pare.

When looking at the console client side I get following error every time the ponent renders:

modules.js?hash=5bd264489058b9a37cb27e36f529f99e13f95b78:3941 Warning: setState(...): Cannot update during an existing state transition (such as within render or another ponent's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to ponentWillMount.`

My code is following:

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { pare: true };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(button) {
    if (button === 'pare') {
      this.setState(prevState => ({
        pare: !prevState.pare,
      }));
    }
  }

  render() {
    return (
      <Grid>
        <div className="starter-template">
          <h1>This is the dashboard page.</h1>
          <p className="lead">
            Use this document as a way to quickly start any new project.<br />{' '}
            All you get is this text and a mostly barebones HTML document.
          </p>
        </div>

        <ButtonToolbar>
          <button onClick={this.handleClick('pare')}>
            {this.state.pare ? 'AGGREGATE' : 'COMPARE'}
          </button>
        </ButtonToolbar>

        <PivotTable
          ready={this.props.isReady}
          data={this.props.gapData}
          pare={this.state.pare}
        />
      </Grid>
    );
  }
}

export default (DashboardContainer = createContainer(() => {
  // Do all your reactive data access in this method.
  // Note that this subscription will get cleaned up when your ponent is unmounted
  const handle = Meteor.subscribe('weekly-dashboard');

  return {
    isReady: handle.ready(),
    gapData: WeeklyDashboard.find({}).fetch(),
  };
}, Dashboard));

Any advice on how to fix this?

• javascript
• reactjs
• meteor

Share Improve this question Follow edited Aug 11, 2017 at 17:54 Erazihel 7,61566 gold badges3434 silver badges5656 bronze badges asked Aug 11, 2017 at 17:53 ChristophChristoph 1,37722 gold badges2020 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The reason is this line

<button onClick={this.handleClick('pare')}>

This will call the handleClick function while executing render function. You can fix by:

<button onClick={() => this.handleClick('pare')}>

Or

const handleBtnClick = () => this.handleClick('pare');

...
<button onClick={this.handleBtnClick}>
...

I prefer the latter

本文标签： javascriptReactset state using button and pass it as propsStack Overflow