javascript - 为什么状态没有改变？

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

您需要更改代码中的一些内容:

• 您正在尝试访问 setState 内的 prevState，但您没有使用 arrow 函数，因此 prevState 是未定义。

• 您在初始状态数据中将 fontSize 声明为 string，因此递增将不起作用，因为它应该是一个数字。

  <

最后，别忘了clear that interval在componentWillUnmount中。

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

参见working example .