Событие onChange, запущенное дважды в рамках проекта ReactJS - PullRequest
Новая
       7

Событие onChange, запущенное дважды в рамках проекта ReactJS

0 голосов
/ 20 апреля 2020

Может кто-нибудь объяснить, почему это событие происходит дважды?

Вот мой компонент mainContent 

class MainContent extends React.Component {
constructor() {
    super()
    this.state = {
        todos: ToDosData
    }
    this.handleChange = this.handleChange.bind(this)
}

handleChange(id) {
    this.setState(prevState => {
        const updatedToDos = prevState.todos.map(todo => {
            if (todo.id === id) {
                console.log(!todo.completed)
                todo.completed = !todo.completed
            }
            return todo
        })
        console.log(updatedToDos)
        return {
            todos: updatedToDos
        }
    })
}


render() {
    const mainBodyStyles = {
        color: "#FF8C00",
        backgroundColor: "#fG7B02",
    }
    const todoItems = this.state.todos.map(item =>
        <TodoItem
        key={item.id}
        item={item}
        handleChange={this.handleChange}
        />)
    return (
    <div style={mainBodyStyles}>
        {todoItems}
    </div>
    )
}

Вот мой компонент toDo 

function TodoItem(props) {
return (
    <div>
        <input
            type="checkbox"
            checked={props.item.completed}
            onChange={() => props.handleChange(props.item.id)}
        />
        <p>{props.item.text}</p>
    </div>
    )

}

Когда я нажимаю на флажок, он запускает функция события дважды. Я не могу обернуть голову вокруг того, что я делаю неправильно. Заранее спасибо.

...