uuid节点包(创建待办事项列表)出现问题

Question

我正在研究react，并且在使用uuid包时遇到了困难。

我正在使用此教程：https://www.youtube.com/watch?v=nUl5QLkVdvU

错误：

TypeError: uuid_v4__WEBPACK_IMPORTED_MODULE_3___default.a.v4 is not a function
15 |    function handleSubmit(e){
16 |        e.preventDefault();
17 |        if (todo.task.trim()) {
> 18 |            addTodo({ ...todo, id: uuid.v4() });
| ^  19 |            setTodo({ ...todo, task: "" });
20 |        }
21 | 

TodoForm.js:中的所有代码

import React, { useState } from "react";
import uuid from "uuid/v4";
function TodoForm( addTodo ) {
const [todo, setTodo] = useState({
id: "",
task: "",
completed: false
});
function handleTaskInputChange(e){
setTodo({ ...todo, task: e.target.value});
}
function handleSubmit(e){
e.preventDefault();
if (todo.task.trim()) {
addTodo({ ...todo, id: uuid.v4() });
setTodo({ ...todo, task: "" });
}
}
return(
<form onSubmit={handleSubmit}>
<input 
name="task"
type="text"
value={todo.task}
onChange={handleTaskInputChange} />
<button type="submit">submit</button>
</form>
);
}
export default TodoForm;

感谢任何帮助，

感谢

Answer 1

以这种方式更改import：

import { v4 as uuidv4 } from 'uuid';

然后你可以这样使用这个功能：

uuidv4();

在您的情况下：

...
if (todo.task.trim()) {
addTodo({ ...todo, id: uuidv4() });
setTodo({ ...todo, task: "" });
}
...

当你不更改import时，你也可以尝试用这种方式更改代码，但如果它有效，我不能100%确定：

...
if (todo.task.trim()) {
addTodo({ ...todo, id: uuid() });
setTodo({ ...todo, task: "" });
}
...

但试试看。。。