componentDidUpdate（）中的setState（） [英] setState() inside of componentDidUpdate()

问题描述

我正在写一个脚本，根据输入的高度和屏幕上的位置，将下拉菜单移动到输入下方或上方。此外，我想根据其方向将修饰符设置为下拉列表。
但是在 componentDidUpdate 内使用 setState 创建一个无限循环（这是很明显的）

我发现使用 getDOMNode 并将classname直接设置为下拉列表的解决方案，但我觉得应该有更好的解决方案使用React工具。任何人都可以帮助我吗？

这里是 getDOMNode 的工作代码的一部分（i
a一点忽略定位逻辑来简化代码）

 让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> 
）; 
} 
} ）; 
  

这里是setstate（创建无限循环）的代码

 让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（&l t; DropDownRow key = {response.symbol} data = {data} />）; 
}）} 
< / DropDown> 
）; 
} 
}）; 
  

解决方案

您可以使用 setState inside componentDidUpdate 。问题是，无论如何，您正在创建无限循环，因为没有中断条件。

根据事实，您需要浏览器提供的值，一旦组件渲染，我认为你使用 componentDidUpdate 的方法是正确的，它只需要更好地处理触发 setState 。

I'm writing a script which moves dropdown below or above input depending on height of dropdown and position of the input on the screen. Also I want to set modifier to dropdown according to its direction. But using setState inside of the componentDidUpdate creates an infinite loop(which is obvious)

I've found a solution in using getDOMNode and setting classname to dropdown directly, but i feel that there should be a better solution using React tools. Can anybody help me?

Here is a part of working code with getDOMNode (i a little bit neglected positioning logic to simplify 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>
        );
    }
});

and here is code with setstate (which creates an infinite loop)

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

解决方案

You can use setStateinside componentDidUpdate. The problem is that somehow you are creating an infinite loop because there's no break condition.

Based on the fact that you need values that are provided by the browser once the component is rendered, I think your approach about using componentDidUpdate is correct, it just needs better handling of the condition that triggers the setState.

这篇关于componentDidUpdate（）中的setState（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！