在componentDidUpdate（）内部的setState（）

Question

我正在编写一个脚本，该脚本根据下拉列表的高度和输入在屏幕上的位置将下拉列表移动到输入下方或上方。我也想将修改器设置为根据其方向下拉。但是setState在内部使用componentDidUpdate会产生无限循环（这很明显）

我已经找到了使用getDOMNode和直接将classname设置为下拉列表的解决方案，但是我觉得应该使用React工具有更好的解决方案。有谁能够帮我？

这是工作代码的一部分getDOMNode（略微忽略了定位逻辑，以简化代码）

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

这是带有setstate的代码（它创建一个无限循环）

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

Answer 1

你可以setState在里面使用componentDidUpdate。问题在于，由于没有中断条件，因此您正在以某种方式创建无限循环。

基于您需要呈现组件后浏览器提供的值的事实，我认为您的使用方法componentDidUpdate是正确的，它只需要更好地处理触发的条件即可setState。