1. Нельзя использовать
this.state в
setState, так как
setState асинхронный метод и на момент вызова состояние может успеть измениться. Для обновления состояния по текущему надо передавать в
setState функцию возвращающую новый объект состояния. В момент вызова первым аргументом туда придет актуальное состояние компонента:
this.setState(prevState => ({
tasks: [
...prevState.tasks,
{ content, comments: [], active: true},
],
}));
2. Хандлеры лучше биндить в конструкторе, либо использовать
inline class arrow function вместо метода класса:
bind в конструкторе:
constructor(props) {
super(props);
this.onAddItem = this.onAddItem.bind(this);
}
inline class arrow function:
onAddItem = content => {
// some stuff
};
3. С формами гораздо удобней работать через контролируемые элементы:
class Example extends Component {
state = {
inputValue: '',
};
handleChange = e => {
const { name, value } = e.target;
this.setState({
[name]: value,
});
};
render() {
const { inputValue } = this.state;
return (
<Wrapper>
<input
name="inputValue"
value={inputValue}
onChange={this.handleChange}
/>
...
</Wrapper>
);
}
