componentDidUpdate - 錯誤：超出最大更新深度

Question

class Suggestions extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false
        }

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        console.log(event.target.value)
    }

    componentDidUpdate(props, state) {
        if(props.dataSearchBox) {
            this.setState({visible: true})

        } else {
            this.setState({visible: false})
        }
    }

    render() {
        return (
            <div className={`g${this.state.visible === true ? '': ' h'}`}>
                <ul>
                </ul>
            </div>
        );
    }
}
export default Suggestions;

我試圖根據道具更改設置狀態，但是我在componentDidUpdate收到以下錯誤：

There was an error! Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我在這兒干什么呢？

Answer 1

你的問題在這里：

componentDidUpdate(props, state) {
    if(props.dataSearchBox) {
        this.setState({visible: true})

    } else {
        this.setState({visible: false})
    }
}

componentDidUpdate被調用，它設置狀態，觸發componentDidUpdate ... 一輪又一輪。

您是否需要一個單獨的狀態屬性來處理這個問題？ 這有點反模式——你已經有了你需要的東西作為道具，只需使用它的值來直接控制可見性：

render() {
    return (
        <div className={`g${this.props.dataSearchBox ? '': ' h'}`}>
            <ul>
            </ul>
        </div>
    );
}