在渲染中更改状态参数是否反模式？答案

【问题标题】：Does it anti-pattern to change state parameter in render?在渲染中更改状态参数是否反模式？
【发布时间】：2019-05-23 17:11:24
【问题描述】：

如果组件中的状态发生更改，我需要制作简单的切换动画。但是我不想每次 react 调用组件渲染时都显示这个动画。我找到了一种方法，但我不喜欢我需要在没有 setState 的情况下直接更改状态变量并在渲染中进行。此外，我不喜欢每次在动画上生成新密钥的想法。我认为它是反模式。如何以不同的方式获得相同的结果？

onClick() {
    if(this.props.items.length>=5) {
        this.setState({
            toggleWarning: true
        });

    }else {
        this.props.onStepAdd();
    }
}

render() {
    let toggle = "";
    let toggleKey = null;
    if(this.state.toggleWarning) {
        toggle = " "+style.toggleMsg;
        toggleKey = {key:Math.random()};
        this.state.toggleWarning = false;
    }

    return (
        <div>
            <h1>Add New</h1>
            <div>
                <Button
                    onClick={this.onClick}
                    label="Add Step"
                />
            </div>
            <div
                className={style.noteMsg + toggle}
                {...toggleKey} >
                <h3>Note: You can create only up to 5 steps for form wizard</h3>
            </div>
        </div>
    );
}

【问题讨论】：

你为什么不用setState？以及为什么只有一项时需要随机化key？
在setState 函数之外直接改变状态是反模式。如果您共享您的动画代码，那么也许我们可以回答得更好。我怀疑你希望你的动画代码有一个回调，当完成时调用一些 toggleWarning 回调将你的状态值切换回 false。

标签： reactjs

【解决方案1】：

不确定我是否理解目标，但如果您想在单击后添加一个类，然后在一段时间后删除该类：

previousTimeout = undefined
onClick = () => {
  if(this.props.items.length>=5) {
    this.setState({toggleWarning: true});
    clearTimeout(this.previousTimeout);
    this.previousTimeout = setTimeout(() => {
      this.setState({toggleWarning: false})
    }, 500);
}

render() {
  ...className={style.noteMsg + this.state.toggleWarning ? ' '+style.toggleMsg : ''}
}

【讨论】：