当属性深度克隆返回“未定义”时，反应状态已定义

Question

我正在尝试编写一个简单的ToDo应用。

单击TodoItem应该从状态中删除一个项目，但是当我这样做时，我得到一个TypeError: this.state is undefined。我不知道怎么了。

我的代码如下：

---- App.js ----

import React from "react";
import TodoItem from "./components/TodoItem";

class App extends React.Component {
  state = {
    items: {
      item1: { text: "Nazwa item1", isDone: false },
      item2: { text: "Nazwa item2", isDone: false },
      item3: { text: "Nazwa item3", isDone: false },
      item4: { text: "Nazwa item4", isDone: false }
    }
  };

  removeItem(key) {
    const items = { ...this.state.items }; // TypeError: this.state is undefined
    console.log(items);
  }

  render() {
    return (
      <React.Fragment>
        <ul>
          {Object.keys(this.state.items).map(key => (
            <TodoItem
              removeItem={this.removeItem}
              index={key}
              key={key}
              item={this.state.items[key]}
            />
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default App;

---- TodoItem.js ----

import React from "react";

const TodoItem = props => {
    return (
        <li onClick={() => props.removeItem(props.index)}>
            {props.item.text}
            {props.item.isDone ? "zrobione" : "niezrobione"}
        </li>
    );
};

export default TodoItem;

Answer 1

问题在于this绑定到您的函数而不是类。

为防止这种情况，您可以使用箭头函数保持this与类的绑定，或调用.bind方法

这应该使它起作用：

 removeItem = (key) => {
    const items = { ...this.state.items };
    console.log(items);
  }

或那个：

removeItem={this.removeItem.bind(this)}

这里是in-depth article