javascript - 状态已更改，但组件未刷新

Question

我正在更改状态，我可以在 console.log 中看到新状态，但是，TextArea 不显示新状态，但只有当它首次展示。

这是我的实现:

import React, {Component} from 'react';
import {TextArea} from "semantic-ui-react";

class Output extends Component {

    static myInstance = null;
    state = { keys:[] }

    updateState(){
        // this method is called from outside.. 
        this.setState({ keys:this.state.keys.push(0) });
        // I can see that keys are getting increase
        console.log(this.state.keys);
    }

    render() {
        return (
            <TextArea value={this.state.keys.length} />

        );
    }
}

TextArea 将继续显示 0，尽管 state.keys 的长度增加了..

有什么想法吗？

Answer 1

永远不要改变状态。 要更新状态，请使用以下语法:

this.setState(prevState => ({
  keys: [...prevState.keys, newItem]
}))