NextJS - 未处理的运行时错误类型错误：将类函数转换为挂钩函数时无法读取未定义的属性(读取"长度")

Question

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

未处理的运行时错误类型错误：无法读取未定义(读取"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;

非常感谢！

Answer 1

这是因为在handleChange中，u用{text:e.target.value}重写整个状态(状态挂钩的工作方式与基于类的组件状态不同(你应该试试这个：

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

Answer 2

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

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;

Answer 3

问题很可能是由于这段代码引起的。

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
};