onChange 事件在 ReactJS 项目中触发了两次

Question

谁能解释为什么这个事件被触发了两次？

这是我的 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>
    )
}

这是我的待办事项

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

}

当我点击一个复选框时，它会运行事件函数两次。我无法理解我做错了什么。提前致谢。

Answer 1

我认为，这是因为 this.setState 调用 App.js handleChange 函数正在改变或改变 prevState

的状态

handleChange(id){    
    
    this.setState((prevState) => {            
              let updatedToDos  =   prevState.todos.map(
                todo  => {
                  let tempItem=Object.assign({}, todo);

                  if(tempItem.id === id) {
                    console.log("here");
                    tempItem.completed = !tempItem.completed                              
                  }
                  return tempItem; 
            }
          );

      return { todos:updatedToDos };
    });
  }

Answer 2

预计状态更新器在React.Strict模式下被调用两次。参考这个答案

将您的 handleChange 函数更新为以下内容。

  handleChange(id) {
    const todos = [...this.state.todos];
    const newTodo = todos.map((todo) => {
      if (todo.id === id) {
        console.log(!todo.completed);
        todo.completed = !todo.completed;
      }
      return todo;
    });
    console.log(newTodo);
    this.setState({ todos: newTodo });
  }

onChange 事件在 ReactJS 项目中触发了两次

onChange event triggered twice within ReactJS project

javascript

events

event-handling

reactjs