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（连通组件）

@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

我尝试以普通的方式实例化类的方法（没有箭头函数），它开始工作了！由于我看到其他人使用这样的语法非常成功，因此该组件无法使用箭头函数，这很奇怪。

在键入表单时“只能更新已安装或安装的组件”

1 个答案: