Reactjs &引用；只能更新已安装或正在安装的部件”；在输入表格时

每当我在

的输入字段中键入内容时，就会出现以下错误：

warning.js:36 warning:setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止操作。请检查表单组件的代码。

。Refs也不起作用——每当我提交一个空字段时，控制台就会说这些字段是未定义的。这似乎没有任何意义，因为我没有卸载我的组件。你知道是什么导致了这个错误吗

App.ts（AppContainer来自react热加载程序库）：

const render=（组件：任意）=>{
ReactDOM.render(
,
document.getElementById（'root'））
)
};
渲染（TodoList）；
如果（模块热）{
module.hot.accept（'./Containers/TodoList'，（）=>{render（TodoList）}）
}

TodoList.tsx（连接的组件）

@autobind
类TodoList扩展了React。组件实现了ITodoList{
公共组件didmount（）：任意{
this.props.requestTodos（）；
}
handleClick（i:任何）{
此.props.requestDeleteTodo（i）；
}  
public render（）：JSX.Element{
const todoItems=this.props.todoItems.map（（文本，i）=>{
返回
});
返回(

{todoItems}

);
}
}
导出默认的connectComponent（['todoItems']，TodoList）；

表格1.tsx：

@autobind
class Form extends React.Component<IProps, IState> {

    private todoInputField: HTMLInputElement; 
    private todoForm: HTMLFormElement;

    public state = {
        inputValue: ''
    }

    private handleTodoSubmit = (e: React.FormEvent<HTMLFormElement>): void =>  {
        e.preventDefault();
        var {inputValue} = this.state;
        this.props.postTodo(inputValue);
        this.todoForm.reset();
    }

    private update = (e: any): void => {
        var value = e.target.value;
        this.setState({inputValue: value});
    }

    public render(): JSX.Element {
        return(
            <form className={'todo-form'} ref={form => { this.todoForm = form; }} onSubmit={this.handleTodoSubmit} method="POST" action="">
                <input
                onChange={this.update}
                value={this.state.inputValue}
                ref={input => { this.todoInputField = input; }}
                placeholder="add todo!"/>
            </form>
        );
    }

};

@autobind
类形式扩展了React.Component{
私有todoInputField:HTMLInputElement；
私有todoForm:HTMLFormElement；
公共国家={
输入值：“”
}
私有handleTodoSubmit=（e:React.FormEvent）：void=>{
e、 预防默认值（）；
var{inputValue}=this.state；
this.props.postTodo（inputValue）；
this.todoForm.reset（）；
}
私有更新=（e:any）：void=>{
var值=e.目标值；
this.setState（{inputValue:value}）；
}
public render（）：JSX.Element{
返回(
{this.todoForm=form；}}onSubmit={this.handleTodoSubmit}method=“POST”action=”“>
{this.todoInputField=input；}}
占位符=“添加待办事项！”/>
);
}
};

我尝试用普通的方式实例化该类的方法（没有箭头函数），它开始工作了！由于我看到其他人非常成功地使用了这种语法，所以该组件不能与箭头函数一起工作，这非常奇怪

尝试更改事件处理程序：

onChange={（）=>this.update}

，

onSubmit={（）=>this.handleTodoSubmit}

中的

Form.tsx:：render（）

（）

@autobind
class TodoList extends React.Component<IProps, {}> implements ITodoList {

    public componentDidMount(): any {
        this.props.requestTodos();
    }

    handleClick(i: any) {
        this.props.requestDeleteTodo(i);
    }  

    public render(): JSX.Element {
        const todoItems = this.props.todoItems.map((text, i) => {
            return <TodoItem deleteTodo={this.handleClick.bind(null,i)} key={i} text={text} />
        });

        return(
            <div>
                <Form postTodo={this.props.postTodo}/>
                <ul className='todo-list'>
                    {todoItems}
                </ul>
            </div>
        );
    }

}

export default connectComponent(['todoItems'], TodoList);

@autobind
class Form extends React.Component<IProps, IState> {

    private todoInputField: HTMLInputElement; 
    private todoForm: HTMLFormElement;

    public state = {
        inputValue: ''
    }

    private handleTodoSubmit = (e: React.FormEvent<HTMLFormElement>): void =>  {
        e.preventDefault();
        var {inputValue} = this.state;
        this.props.postTodo(inputValue);
        this.todoForm.reset();
    }

    private update = (e: any): void => {
        var value = e.target.value;
        this.setState({inputValue: value});
    }

    public render(): JSX.Element {
        return(
            <form className={'todo-form'} ref={form => { this.todoForm = form; }} onSubmit={this.handleTodoSubmit} method="POST" action="">
                <input
                onChange={this.update}
                value={this.state.inputValue}
                ref={input => { this.todoInputField = input; }}
                placeholder="add todo!"/>
            </form>
        );
    }

};