Question

我不明白为什么console.log()起作用，但是状态仍然没有改变？

手段setState()被调用但未呈现为新的……

我尝试了异步版本setState()，但仍无法正常工作。

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {fontSize: `${20}px`};
        setInterval( 
            () => {
                console.log("ok"); // ok, ok, ok ...
                this.setState(
                    {
                        fontSize: ++prevState.fontSize+"px"
                    }
                )
            },
            1000
        );
    }
    render() {
        let s1 = {
            fontSize: this.state.fontSize
        }
        return <p style={s1}>{this.props.text}</p>;
    }
}

ReactDOM.render(
    <Hello text="sadadadsdad" />,
    document.getElementById("root")
)

Answer 1

您需要在代码中更改几件事：

您正在尝试访问prevState内部的setState，但是您没有使用arrow函数，因此prevState是undefined。
您在初始状态数据中将fontSize声明为string，因此增量操作应该是数字，因此无法进行。

最后，请不要忘记在componentWillUnmount中的clear that interval。

constructor(props) {
  super(props);
  this.state = { fontSize: 20 };
  setInterval(() => {
    this.setState(prevState => ({
      fontSize: ++prevState.fontSize
    }));
  }, 1000);
}

请参见working example。

为什么状态没有改变？

1 个答案: