在表单中键入时"Can only update a mounted or mounting component"

Question

每当我在<Form />的输入字段中键入内容时，都会收到以下错误：warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Form component..引用也不起作用 - 每当我提交一个空字段时，控制台都会说这些是未定义的。这似乎没有任何意义，因为我不卸载我的组件。您对导致此错误的原因有任何想法吗？

App.ts(AppContainer 来自 react-hot-loader 库(：

const render = (Component: any) => {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<TodoList />
</Provider>
</AppContainer>,
document.getElementById('root')
)
};
render(TodoList); 
if (module.hot) {
module.hot.accept('./Containers/TodoList', () => { render(TodoList) })
}

TodoList.tsx(connected component(

@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);

Form.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>
);
}
};

Answer 1

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