componentWillReceiveProps和componentDidUpdate无限循环

Question

I'm trying to update the state after changing state from a child component and without success, every time I call the function I got a stack overflow, the prop is calling infinite times the function, but the question is, I really need to update this state and have no idea how to solve this currently.

Parent

import React, { PropTypes, Component } from 'react';
import Card from './card/card.js';
import style from './style.scss';

class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFlipped: false,
      oneOpened: true,
      history: [],
      childFlipToFalse: false,
    };
    this.historyToggleStates = this.historyToggleStates.bind(this);
    this.forceFlipParent = this.forceFlipParent.bind(this);
    this.checkForceFlip = false;
  }
  historyToggleStates(bool, id, callForceFlip) {
    this.setState({
      history: this.state.history.concat([{ opened: bool, id }]),
    }, () => {
      console.log('inside historyToggleStates');
      if (callForceFlip) {
        this.forceFlipParent()
      }
    });
  }
  forceFlipParent() {
    const { history } = this.state;
    const first = history[0];
    const last = history[history.length - 1];
    const beforeLast = history[history.length - 2];
    console.log('force FLIP PARENT');
    if (history.length > 1) {
      if (JSON.stringify(last.opened) === JSON.stringify(beforeLast.opened)) {
        this.setState({ childFlipToFalse: true });
      }
    }
  }
  render() {
    const rest = {
      basePath: this.props.basePath,
      backCard: this.props.backCard,
      isShowing: this.props.isShowing,
      historyToggleStates: this.historyToggleStates,
      isOpened: this.state.isOpened,
      isFlipped: this.state.isFlipped,
      checkOneOpened: this.checkOneOpened,
      history: this.state.history,
      forceFlip: this.state.childFlipToFalse,
      flipToFalse: this.forceFlipParent,

    };
    const cardsMap = this.props.cards.map((item, key) => {
      return (
        <Card
          item={item}
          keyId={key}
          {...rest}
        />
      );
    });
    return (
      <div className="col-lg-12 text-center">
        {cardsMap}
      </div>
    );
  }
}


export default Container;

Container.propTypes = {
  cards: PropTypes.array.isRequired,
  item: PropTypes.func,
  basePath: PropTypes.string,
  backCard: PropTypes.string,
  isShowing: PropTypes.bool,
};

Child

import React, { Component, PropTypes } from 'react';
import ReactCardFlip from 'react-card-flip';
import style from './style.scss';

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFlipped: false,
      update: false,
      id: 9999999,
    };
    this.handleClick = this.handleClick.bind(this);
    this.checkOneOpened = this.checkOneOpened.bind(this);
  }
  componentWillReceiveProps(nextprops) {
    const { history, isFlipped, historyToggleStates } = this.props;
    const last = nextprops.history[nextprops.history.length - 1];
    const beforeLast = nextprops.history[nextprops.history.length - 2];
    console.log(history);
    console.log(nextprops.history);
    if (nextprops.forceFlip && last.id === nextprops.keyId) {
      this.setState({ isFlipped: !this.state.isFlipped, update: true, id: last.id }, () => {
        console.log('callback willreceiveprops', this.state.isFlipped);
        historyToggleStates(this.state.isFlipped, nextprops.keyId, true, this.state.update);  **<--- Here's my problem**
      });
    }
    if (nextprops.forceFlip && beforeLast.id === nextprops.keyId) {
      this.setState({ isFlipped: !this.state.isFlipped, update: true, id: beforeLast.id }, () => {
      });
    }
  }

  handleClick(e, nextState, id) {
    const { keyId, historyToggleStates, forceFlip } = this.props;
    if (e) {
      e.preventDefault();
    }
    if (!nextState) {
      this.setState({ isFlipped: !this.state.isFlipped }, () => {
        historyToggleStates(this.state.isFlipped, keyId, true, this.state.update);
      });
    } else {
      // historyToggleStates(nextState, id, false);
      return 0;
    }
  }

  checkOneOpened(e) {
    if (!this.props.isShowing) {
      this.handleClick(e);
    }
  }

  render() {
    const { item, basePath, backCard, isShowing, isFlipped, forceFlip } = this.props;
    return (
      <div className={`col-lg-2 col-md-3 col-sm-6 ${style.card}`}>
        <ReactCardFlip
          isFlipped={this.state.isFlipped}
          flipSpeedBackToFront={0.9}
          flipSpeedFrontToBack={0.9}
        >
          <div key="front">
            <button
              onClick={() => {this.checkOneOpened()}}
            >
              <img src={isShowing ? `${basePath}${item.image}` : backCard} alt={item.name} className={`${style.img}`} />
            </button>
          </div>
          <div key="back">
            <button
              onClick={() => {this.checkOneOpened()}}
            >
              <img src={isShowing ? backCard : `${basePath}${item.image}`} alt={item.name} className={`${style.img}`} />
            </button>
          </div>
        </ReactCardFlip>
      </div>
    );
  }
}

export default Card;


Card.propTypes = {
  basePath: PropTypes.string,
  backCard: PropTypes.string,
  isShowing: PropTypes.bool,
  historyToggleStates: PropTypes.func,
  isOpened: PropTypes.bool,
  isFlipped: PropTypes.bool,
  checkOneOpened: PropTypes.func,
};

historyToggleStates(this.state.isFlipped, nextprops.keyId, true, this.state.update) is the root of my issue, and I really need to update this because I'm comparing the array inside him with another array

Update 1: I know that my calling to historyToggleStates is being done in the couple cases, but as you can see I need to update my state from the parent because I compare this value every time in my componentWillReceiprops from my child component.

Is it really necessary a state manager for this situation? I'm following the tips from Dan Abramov , and avoiding raise the complexity of the system, any tip would be appreciated.

Answer 1

your calling historyToggleStates in both case with callForceFlip as true, which causes forceFlipParent on the parent to be invoked which sets childFlipToFalse to True (passed to the child as forceFlip )

i believe forceFlip being always true is the source of your problem.

Answer 2

The child component's componentWillReceiveProps , which in the first place is triggered when it is updated by the parent with new props, trigger's an update in the parent (with historyToggleStates ).

However for this cycle depends on the following:

if (nextprops.forceFlip && last.id === nextprops.keyId) {

ie if component's incoming prop's keyId is same as last component in the history's keyId . In other words, when the children get updated, the last component in the history will always run this code block provided forceFlip is true.

forceFlip 's value depends on the following:

    if (history.length > 1) {
       if (JSON.stringify(last.opened) === JSON.stringify(beforeLast.opened)) {

ie forceFlip is set to true if any last two components in the history are simultaneously open.

Then, as you said historyToggleStates is triggered, parent gets updated, child's componentWillReceiveProps gets triggered and the cycle repeats.

Possible Workaround

Now I take it that it was intentionally designed that if last two cards were simultaneously open, they must be force flipped ie closed.

To achieve this, I'd say don't keep the state of the card localised in the card component, but pull it up to the parents components state and keep the children card components agnostic. In the parent, maintain something like cardsState (maybe a better name) and use it to decide whether a card must be open or not. You can close the last two simultaneously open cards by simply setting their state to false if you detect that they are open in the history.

This will free you from the dependency on forceFlip variable and will keep you children card component simpler - open them only if the state says open.

Answer 3

我有一个与此类似的问题，我的handleClick无限循环，请尝试使用onClick函数：

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

Answer 4

• I thinks the problem is in this part

   if (nextprops.forceFlip && last.id === nextprops.keyId) { this.setState({ isFlipped: !this.state.isFlipped, update: true, id: last.id }, () => { console.log('callback willreceiveprops', this.state.isFlipped); historyToggleStates(this.state.isFlipped, nextprops.keyId, true, this.state.update); // **<--- Heres my problem** });} 

  you can check the values of the if condition so after the re-rendered it not going inside condition.

• The prop-types have move to a different package, check out so you don't get a warning for that https://facebook.github.io/react/docs/typechecking-with-proptypes.html

• Suggest to change that name property of childFlipToFalse to ischildFlip

• Here you can take out the call back function as you are not use it

   this.setState({ isFlipped: !this.state.isFlipped, update: true, id: beforeLast.id }, () => {}); 

  to

   this.setState({ isFlipped: !this.state.isFlipped, update: true, id: beforeLast.id }); 

This is my suggestion: In this case you can make the parent component the only class Componente and the children a staless component this will help have a better structure and manage your child component, this will make you do a different work around of the case that will be more easy to approach