setState() à l'intérieur de componentDidUpdate()

Si vous utilisez setState à l'intérieur de componentDidUpdate il met à jour le composant, ce qui résulte en un appel à componentDidUpdate qui, par la suite des appels setState résultant à nouveau dans la boucle infinie. Vous devriez conditionnellement appel setState et de s'assurer que la condition violation de l'appel se produit finalement.e.g:

componentDidUpdate: function() {
    if (condition) {
        this.setState({..})
    } else {
        //do something else
    }
}

Dans le cas où vous ne sont que la mise à jour du composant par l'envoi d'accessoires pour elle(elle n'est pas mise à jour par setState, sauf pour le cas à l'intérieur de componentDidUpdate), vous pouvez appeler setState à l'intérieur de componentWillReceiveProps au lieu de componentDidUpdate.

Je dirais que vous devez vérifier si l'état a déjà la même valeur que vous essayez de définir. Si c'est la même chose, il n'y a pas de point pour définir l'état de nouveau pour la même valeur.

Assurez-vous de définir votre état comme ceci:

let top = newValue /*true or false*/
if(top !== this.state.top){
    this.setState({top});
}

Cet exemple clair de la Réagir Cycle de Vie des Crochets.

Vous pouvez setState dans getDerivedStateFromProps méthode c'est à dire static et de déclencher la méthode après les accessoires de changement dans componentDidUpdate.

Dans componentDidUpdate vous obtiendrez 3ème param qui renvoie de getSnapshotBeforeUpdate.

JS:

//Child component
class Child extends React.Component {
//First thing called when component loaded
constructor(props) {
console.log("constructor");
super(props);
this.state = {
value: this.props.value,
color: "green"
};
}
//static method
//dont have access of 'this'
//return object will update the state
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps");
return {
value: props.value,
color: props.value % 2 === 0 ? "green" : "red"
};
}
//skip render if return false
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate");
//return nextState.color !== this.state.color;
return true;
}
//In between before real DOM updates (pre-commit)
//has access of 'this'
//return object will be captured in componentDidUpdate
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate");
return { oldValue: prevState.value };
}
//Calls after component updated
//has access of previous state and props with snapshot
//Can call methods here
//setState inside this will cause infinite loop
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate: ", prevProps, prevState, snapshot);
}
static getDerivedStateFromError(error) {
console.log("getDerivedStateFromError");
return { hasError: true };
}
componentDidCatch(error, info) {
console.log("componentDidCatch: ", error, info);
}
//After component mount
//Good place to start AJAX call and initial state
componentDidMount() {
console.log("componentDidMount");
this.makeAjaxCall();
}
makeAjaxCall() {
console.log("makeAjaxCall");
}
onClick() {
console.log("state: ", this.state);
}
render() {
return (
<div style={{ border: "1px solid red", padding: "0px 10px 10px 10px" }}>
<p style={{ color: this.state.color }}>Color: {this.state.color}</p>
<button onClick={() => this.onClick()}>{this.props.value}</button>
</div>
);
}
}
//Parent component
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { value: 1 };
this.tick = () => {
this.setState({
date: new Date(),
value: this.state.value + 1
});
};
}
componentDidMount() {
setTimeout(this.tick, 2000);
}
render() {
return (
<div style={{ border: "1px solid blue", padding: "0px 10px 10px 10px" }}>
<p>Parent</p>
<Child value={this.state.value} />
</div>
);
}
}
function App() {
return (
<React.Fragment>
<Parent />
</React.Fragment>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

HTML:

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>