React-Redux Endlosschleife wegen möglicherweise Zustand

Question

Guten Tag ändern,

In meiner Klasse Pagelist ich eine Funktion hinzugefügt werden soll, dass der Staat auf Klick ändert. Wenn ich jedoch diese Funktion in die a-Schaltfläche einfüge, die nicht einmal angeklickt wird, startet der Browser eine endlose Schleife, die den Zustand der aktuellen Seite ändert.

Obwohl ich die Dokumente über Komponenten gelesen habe, scheint dies merkwürdiges Verhalten. Das Verhalten ist verfälscht, wenn auf die Schaltfläche AddPage geklickt wird.

Vielen Dank im Voraus!

Pagelist:

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import Page from '../components/Page.jsx'; 
import {addPage} from '../actions/addPage.js' 
import {nextPage} from '../actions/nextPage.js' 
import RaisedButton from 'material-ui/RaisedButton'; 
import _ from 'lodash'; 

class PageList extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     currentpage : 0, 
    }; 
    } 

    nextPage(){ 
    this.setState({currentpage: this.state.currentpage+1}); 
    } 

    renderList() { 
    if(this.props.item){ 
     return (
     <div> 
      <RaisedButton label="Next Page" onClick={this.nextPage()}></RaisedButton> 
      <Page key={this.state.currentpage} index={this.state.currentpage}> 
      {this.props.item.title} 
      {this.props.item.desc} 
      </Page> 
     </div> 
    ); 
    }else{ 
     return(
     <p>No Pages</p> 
    ) 
    } 
    } 

    render() { 
     return (
      <div> 
      <RaisedButton label="Add new Page" onClick={() => this.props.addPage("Titel Page", "Page Beschrijving")}></RaisedButton> 
      <ul> 
       {this.renderList()} 
      </ul> 
      </div> 
     ); 
    } 
} 

// Get apps state and pass it as props to PageList 
//  > whenever state changes, the PageList will automatically re-render 
function mapStateToProps(state, ownProps) { 
    return { 
     pageList: state.pageList, 
     item: _.find(state.pages, 'id', ownProps.currentpage) 
    }; 
} 

// Get actions and pass them as props to to PageList 
//  > now PageList has this.props.selectPage 
function matchDispatchToProps(dispatch){ 
    return bindActionCreators({addPage: addPage, nextPage: nextPage}, dispatch); 
} 

// We don't want to return the plain PageList (component) anymore, we want to return the smart Container 
//  > PageList is now aware of state and actions 
export default connect(mapStateToProps, matchDispatchToProps)(PageList); 

Answer 1

Sie den Aufruf der nextPage Funktion auf jeder machen, anstatt es zu onClick vorbei.

ändern onClick={this.nextPage()} mit onClick={() => this.nextPage()}

Answer 2

Es gibt einen kleinen Fehler:

<RaisedButton label="Next Page" onClick={this.nextPage}> 
</RaisedButton> 

sonst this.nextPage() rechts aufgerufen wird, wenn es gemacht wird.