我尝试将类函数文件转换为钩子函数，但每当在字段中输入文本时都会出现以下错误。

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'length')

我想我已经转换了所有内容，但就是找不到是什么 - 我遗漏了什么吗？

新的钩子代码出现上述错误：

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;

先前的类函数文件正在转换为上面的钩子文件：

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;

非常感谢！