I get this error in React - TypeError: Cannot create property 'completed' on boolean 'true'

Question

我正在构建一个用于练习和学习 React 基础知识的“待办事项”应用程序。我有一个名为 TodosStores.js 的文件中的对象数组，我将其作为 props 传递给 TodoList 组件，如下所示：

import TodoList from './components/TodoList';
import TodosStores from './stores/TodosStore';

function App() {
  return (
    <div className="App">
      <TodoList todos={TodosStores} />
    </div>
  );
}

export default App;

现在，我正在尝试将当前 todo.completed 的属性值切换为 true & false，这样我就可以 remove/add todo-item-completed class。但是，我收到此错误：TypeError: Cannot create property 'completed' on boolean 'true'。我正在寻求对我在这里做错了什么的解释。我来自 Vue 背景，所以可能还有另一种方法可以在 React 中更改 state。

这是我的组件的代码片段：

import React, { Component } from 'react';
import './TodoListStyles.css'

class TodoList extends Component {
  constructor(props){
    super(props);
    
    this.state = { todos: this.props.todos }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(item) {
    return item.completed = !item.completed
  }

  render() {
    
    return (
      <ul className='todo-list'>
        { 
          this.props.todos.map(
            todo => 
            <React.Fragment key={todo.id}>
              <li className={`todo-item ${todo.completed ? 'todo-item-completed' : ''}`}>{ todo.title }</li>
              <input type='checkbox' onChange={this.handleChange(todo.completed)} checked={todo.completed} />
            </React.Fragment>
          ) 
        }
      </ul>
    )
  }
}

export default TodoList;

PS：我正在使用 React Class 组件，因为我想为使用 class 组件的开源项目做出贡献。稍后我可能会尝试重构为 hooks。

Answer 1

您收到错误 TypeError: Cannot create property 'completed' on boolean 'true' 的原因是因为您在 onChange={this.handleChange(todo.completed)} 中将布尔值传递给 handleChange 并且在函数中您是 creating/mutating item.completed. 它不能在 true 或 false 上创建属性 completed 基本上。

I get this error in React - TypeError: Cannot create property 'completed' on boolean 'true'

I get this error in React - TypeError: Cannot create property 'completed' on boolean 'true'

javascript

state

event-handling

reactjs