NextJS - 未处理的运行时错误类型错误：将 class function 转换为挂钩 function 时无法读取未定义的属性（读取“长度”）

Question

我正在尝试将 class function 文件转换为挂钩 function 但每当在字段中输入文本时都会收到以下错误。

未处理的运行时错误类型错误：无法读取未定义的属性（读取“长度”）

我想我已经转换了所有东西，但找不到什么 - 我错过了什么吗？

带有上述错误的新钩子代码：

import React, { useState } from "react";

function Todo(props) {
    const [state, setState] = useState({ items: [], text: "" });

    const handleChange = (e) => {
        setState({ text: e.target.value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        if (state.text.length === 0) {
            return;
        }

        const newItem = {
            text: state.text,
            id: Date.now(),
        };

        setState((state) => ({
            items: state.items.concat(newItem),
            text: "",
        }));
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label htmlFor="new-todo">What needs to be done?</label>
                <input id="new-todo" onChange={handleChange} value={state.text} />
                <button>Add #{state.items.length + 1}</button>
            </form>
            <TodoList items={state.items} />
        </div>
    );
}

function TodoList(props) {
    return (
        <ul>
            {props.items.map((item) => (
                <li key={item.id}>{item.text}</li>
            ))}
        </ul>
    );
}

export default Todo;

以前的 class 函数文件被转换为上面的钩子文件：

import React from "react";

class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [], text: "" };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="new-todo">What needs to be done?</label>
                    <input
                        id="new-todo"
                        onChange={this.handleChange}
                        value={this.state.text}
                    />
                    <button>Add #{this.state.items.length + 1}</button>
                </form>
                <TodoList items={this.state.items} />
            </div>
        );
    }

    handleChange(e) {
        this.setState({ text: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();
        if (this.state.text.length === 0) {
            return;
        }
        const newItem = {
            text: this.state.text,
            id: Date.now(),
        };
        this.setState((state) => ({
            items: state.items.concat(newItem),
            text: "",
        }));
    }
}

class TodoList extends React.Component {
    render() {
        return (
            <ul>
                {this.props.items.map((item) => (
                    <li key={item.id}>{item.text}</li>
                ))}
            </ul>
        );
    }
}

export default Todo;

非常感谢！

Answer 1

发生这种情况是因为在 handleChange 中你用 { text: e.target.value } 重写整个 state （状态挂钩的工作方式与基于 class 的组件状态不同）你应该试试这个：

const handleChange = (e) => {
    setState((prevState) => {...prevState, text: e.target.value });
};

Answer 2

该问题很可能是由于此代码块造成的。

    const handleChange = (e) => {
        setState({ text: e.target.value });
        // mutating state as this will overwite the current values with
        // {text: e.target.value }
    };

更好的方法是使用 rest 语法，如下所示。

    const handleChange = (e) => {
        setState((prev) => { return {...prev, [text]: e.target.value }});
        // and now when you update text, it shouldnt overwrite your items or 
        //vice versa
    };

Answer 3

如果我必须转换，那么我会这样做。

import React, { useState } from "react";

const Todo = () => {
  const [items, setItems] = useState([]);
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.length === 0) {
      return;
    }
    const newItem = {
      text,
      id: Date.now()
    };
    setItems((prevItems) => [...prevItems, newItem]);
    // clear the input box after adding.
    setText("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="new-todo">What needs to be done?</label>
        <input id="new-todo" onChange={handleChange} value={text} />
        <button>Add #{items.length + 1}</button>
      </form>
      <TodoList items={items} />
    </div>
  );
};

const TodoList = (props) => {
  const { items } = props;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
};

export default Todo;