如何将函数挂钩转换为类状态

Question

我正在尝试在功能组件和基于类的组件中制作待办事项应用程序；

在函数

function addTodo(event) {

    event.preventDefault();

    if (!text.length) {

      return alert("Plese Write a todo");

    }

    const newItem = {

      text: text,

      id: Date.now(),

    }

    setItems(prevList => [...prevList, newItem])

    console.log(newItem);

    setText("");

    inputRef.current.focus();

  }

但是在课堂上，当我设置项目的状态时，它给了我一个错误

    addTodo(event) {

        event.preventDefault();

        if (!this.state.text.length) {

            return alert("Plese Write a todo");

        }

        const newItem = {

            text: this.state.text,

            id: Date.now()

        }

        this.setState({

            items: this.state.items((prevList) => [...prevList, newItem]),

            text: "",

        });

    }

Answer 1

我认为this.state.items((prevList) => [...prevList, newItem])是错误的。你可以尝试将其更改为[...this.state.items, newItem]因为this.state.items没有功能吗？

Answer 2

在 react 中基于类的组件中，您需要将函数绑定到类构造函数中的类才能使用 this 关键字。constructor(props){  super(props);  this.addTodo = this.addTodo.bind(this); // add this line}现在你可以在 addTodo 函数中使用 this.setState 了。还有另一种不需要绑定它的方法。您可以使用箭头功能代替普通功能。   addTodo = (event) => {    //just modify this line        event.preventDefault();        if (!this.state.text.length) {            return alert("Plese Write a todo");        }        const newItem = {            text: this.state.text,            id: Date.now()        }        this.setState({            items: this.state.items((prevList) => [...prevList, newItem]),            text: "",        });    }您可以在此处阅读有关常规函数和箭头函数之间差异的更多信息 - https://medium.com/better-programming/difference-between-regular-functions-and-arrow-functions-f65639aba256

Answer 3

您的代码的问题在于它this.state.items是一个数组，而不是一个接受回调的函数。this.setState({  items: this.state.items((prevList) => [...prevList, newItem]),  text: "",});使用 setter from 时useState，您将当前状态作为回调参数获取，如 中所示setItems(prevList => [...prevList, newItem])。在基于类的setState中，您在那里获得回调参数，而不是您访问项目的位置。对于您的代码，您需要：this.setState(state => (  items: [...state.items, newItem],  text: "",));