Whenever I type something in the input field in <Form /> I get the following error: 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.. Refs don't work as well - whenever I submit an empty field the console says, that these are undefined. That doesn't seem to make any sense since I don't unmount my component. Do you have any ideas about what causes this error?
App.ts(AppContainer is from react-hot-loader library):
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>
);
}
};
