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]
}))

Answer 2

您无需调用updateState函数来更新状态，它仅存在于那儿，为了将0推入您的状态以便用新状态重新渲染组件，您可以在以下位置调用方法componentDidMount如下所示：

componentDidMount = () => {
  this.updateState()
}

这将在组件安装到dom后立即执行您的updateState功能。

Answer 3

这是工作示例

首先，您应该调用函数以更新状态

Example on jsfiddle

class Output extends React.Component {

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

 componentDidMount(){
    this.updateState();
 }

 updateState() {
    const newKeys = [...this.state.keys,0]
  this.setState({ keys:newKeys });
 }
 onTextareaChange(){}

 render() {
  return (
    <textarea value={this.state.keys.length} onChange= {this.onTextareaChange} />
  );
 }
}

ReactDOM.render(<Output />, document.querySelector("#app"))

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

3 个答案: