TypeError: Object(…) is not a function (React.JS)

Question

我正在觀看一個完整的完整堆棧教程，並且這個錯誤出現在我的瀏覽器上

TodoForm.js

import React, { useForm, useHistory, useEffect, setTodo } from 'react';

export const TodoForm = ({ todo, onSubmit }) => {
    const {register, handleSubmit} = useForm({ defaultValues: { text: todo ? todo.text : ""} });
    const history = useHistory()

    useEffect(() => {
        setTodo({
            text: "foo"
        })
    }, [])

    const submitHandler = handleSubmit((data) => {
        onSubmit(data)
        history.push("/");
    })
    return (
                <form onSubmit={submitHandler}>
                    <div className="form-group">
                        <label htmlFor="text">Text:</label>
                        <input className="form-control" ref={register} type="text" name="text" id="text">
                        </input>
                    </div>
                    <div className="form-group">
                        <button className="btn btn-primary">
                            CreateTodo
                        </button>
                    </div>
                </form>
        );
}

CreateTodo.js

import React from 'react';
import { TodoForm } from './TodoForm'

export const CreateTodo = () => {

    const onSubmit = (data) => {
        alert(JSON.stringify(data))
    }
    return (
    <div className="container" >
        <div className="mt-3">
            <h3>Create Todo Item</h3>
            <TodoForm onSubmit={onSubmit} />
        </div>
    </div>
    );
};

我已經更新了我的 React，版本是 17.0.1。 當我刪除這一行<TodoForm onSubmit={onSubmit} />時，它起作用了。 在我的瀏覽器屏幕中，似乎錯誤出現在上面的文件中。 我應該怎么辦？

Answer 1

useForm 似乎不屬於“react”，最接近的是“react-hook-form”，可能您應該安裝該模塊並從中導入，而不是“react”。