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

J'écris un script qui déplace la liste déroulante en dessous ou au-dessus de l'entrée en fonction de la hauteur de la liste déroulante et de la position de l'entrée sur l'écran. Je souhaite également définir le modificateur sur la liste déroulante en fonction de sa direction. Mais utiliser à l' setStateintérieur de componentDidUpdatecrée une boucle infinie (ce qui est évident)

J'ai trouvé une solution en utilisant getDOMNodeet en définissant le nom de classe directement sur la liste déroulante, mais je pense qu'il devrait y avoir une meilleure solution en utilisant les outils React. Quelqu'un peut-il m'aider?

Voici une partie du code de travail avec getDOMNode(une logique de positionnement un peu négligée pour simplifier le code)

let SearchDropdown = React.createClass({
    componentDidUpdate(params) {
        let el = this.getDOMNode();
        el.classList.remove('dropDown-top');
        if(needToMoveOnTop(el)) {
            el.top = newTopValue;
            el.right = newRightValue;
            el.classList.add('dropDown-top');
        }
    },
    render() {
        let dataFeed = this.props.dataFeed;
        return (
            <DropDown >
                {dataFeed.map((data, i) => {
                    return (<DropDownRow key={response.symbol} data={data}/>);
                })}
            </DropDown>
        );
    }
});

et voici le code avec setstate (qui crée une boucle infinie)

let SearchDropdown = React.createClass({
    getInitialState() {
        return {
            top: false
        };
    },
    componentDidUpdate(params) {
        let el = this.getDOMNode();
        if (this.state.top) {
           this.setState({top: false});
        }
        if(needToMoveOnTop(el)) {
            el.top = newTopValue;
            el.right = newRightValue;
            if (!this.state.top) {
              this.setState({top: true});
           }
        }
    },
    render() {
        let dataFeed = this.props.dataFeed;
        let class = cx({'dropDown-top' : this.state.top});
        return (
            <DropDown className={class} >
                {dataFeed.map((data, i) => {
                    return (<DropDownRow key={response.symbol} data={data}/>);
                })}
            </DropDown>
        );
    }
});

Vous pouvez utiliser à l' setStateintérieur componentDidUpdate. Le problème est que d'une manière ou d'une autre, vous créez une boucle infinie car il n'y a pas de condition de rupture.

Sur la base du fait que vous avez besoin de valeurs fournies par le navigateur une fois le composant rendu, je pense que votre approche de l'utilisation componentDidUpdateest correcte, elle a juste besoin d'une meilleure gestion de la condition qui déclenche le setState.

La componentDidUpdatesignature est void::componentDidUpdate(previousProps, previousState). Avec cela, vous pourrez tester quels accessoires / états sont sales et appeler en setStateconséquence.

Exemple:

componentDidUpdate(previousProps, previousState) {
    if (previousProps.data !== this.props.data) {
        this.setState({/*....*/})
    }
}

Si vous utilisez à l' setStateintérieur, componentDidUpdateil met à jour le composant, ce qui entraîne un appel componentDidUpdateauquel il est ensuite appelé à setStatenouveau, ce qui entraîne la boucle infinie. Vous devez appeler conditionnellement setStateet vous assurer que la condition violant l'appel se produira éventuellement, par exemple:

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

Si vous ne mettez à jour le composant qu'en lui envoyant des accessoires (il n'est pas mis à jour par setState, à l'exception du cas à l'intérieur de componentDidUpdate), vous pouvez appeler setStateinside componentWillReceivePropsau lieu de componentDidUpdate.

Cet exemple vous aidera à comprendre les hooks de cycle de vie React .

Vous pouvez setStatedans getDerivedStateFromPropsmethod ie staticet déclencher la méthode après le changement d'accessoires componentDidUpdate.

Dans componentDidUpdatevous obtiendrez le 3ème paramètre qui revient de getSnapshotBeforeUpdate.

Vous pouvez vérifier ce lien codesandbox

// 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);

<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>

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 le même, il est inutile de redéfinir l'état 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});
}

J'ai eu un problème similaire où je dois centrer l'info-bulle. React setState dans componentDidUpdate m'a mis en boucle infinie, j'ai essayé la condition que cela fonctionnait. Mais j'ai trouvé que l'utilisation dans le rappel de référence m'a donné une solution plus simple et propre, si vous utilisez la fonction en ligne pour le rappel de référence, vous serez confronté au problème nul pour chaque mise à jour de composant. Utilisez donc la référence de fonction dans le rappel de référence et définissez-y l'état, ce qui lancera le nouveau rendu