React钩子表单-useForm上的无效钩子调用

问题描述

我目前正在尝试用玩笑对我的应用程序进行单元测试，并对测试库做出反应。我从从React钩子表单导入的useForm钩子中得到一个错误。我在其他组件中以相同的方式使用相同的钩子，但这是唯一失败的钩子。 这是我到目前为止唯一的测试：

import React from "react";
import { render } from "@testing-library/react";
import App from "./App";

describe("<App />",() => {
  test("smoke test",() => {
    render(<App />);
  });
});

这是错误：

 FAIL  src/App.test.tsx
  <App />
    ✕ smoke test (119ms)

  ● <App /> › smoke test

    Invalid hook call. Hooks can only be called inside of the body of a function component. This Could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
   

      33 | 
      34 | export const SearchForm: React.FC<SearchProps> = (props) => {
    > 35 |   const { register,handleSubmit } = useForm<FormData>();
         |                                      ^
      36 | 
      37 |   const onSubmit = handleSubmit(({ title,order }) => {
      38 |     fetch(`/api/movies/search/${title}?order=${order}`,{

这是在useHook调用中出错的组件

import React from "react";
import { useForm } from "react-hook-form";
import {
  Box,InputGroup,InputLeftElement,InputRightElement,FormControl,Input,Select,Icon,} from "@chakra-ui/core/dist";

interface Movies {
  id: number;
  title: string;
  slug: string;
  picture_url: string;
  length: string;
  genres: string;
  avg: number;
  count: number;
}

interface SearchProps {
  onSearch: (movies: Movies[]) => void;
}

interface FormData {
  title: string;
  order: string;
}

export const SearchForm: React.FC<SearchProps> = (props) => {
  const { register,handleSubmit } = useForm<FormData>();

  const onSubmit = handleSubmit(({ title,order }) => {
    fetch(`/api/movies/search/${title}?order=${order}`,{
      method: "GET",headers: {
        "Content-Type": "application/json",Accept: "application/json",},})
      .then((res) => res.json())
      .then((json) => props.onSearch(json))
      .catch((err) => console.error(err));
  });

  return (
    <Box pt="4" margin="auto" ml="5rem" mr="5.5rem">
      <form onSubmit={onSubmit}>
        <FormControl>
          <InputGroup size="md">
            <InputLeftElement
              children={<Icon name="search" color="gray.300" />}
            />
            <Input
              name="title"
              placeholder="Search IMDbest"
              type="text"
              ref={register}
            />
            <InputRightElement
              children={
                <Select onChange={onSubmit} name="order" ref={register}>
                  <option value="asc">Avg rating ascending</option>
                  <option value="desc">Avg rating descending</option>
                </Select>
              }
            />
          </InputGroup>
        </FormControl>
      </form>
    </Box>
  );
};

这是父组件

import React,{ useState,useEffect } from "react";
import { SearchForm } from "./forms/SearchForm";
import { Link } from "react-router-dom";
import { Box,Image,SimpleGrid,Skeleton } from "@chakra-ui/core/dist";

interface Movies {
  id: number;
  title: string;
  slug: string;
  picture_url: string;
  avg: number;
  genres: string;
  length: string;
  count: number;
}

export const MovieCards: React.FC = () => {
  const [movies,setMovies] = useState<Movies[]>([]);


  const handleSubmit = (movies: Movies[]) => {
    setMovies(movies);
  };

  return (
    <>
      <SearchForm onSearch={handleSubmit} />
    </>
  );
};

我已经运行npm ls react和npm ls react-dom，并确认我的项目中每个库只有一个实例，并且它们都是版本16.13.1。我不确定该如何进行处理，因为该钩子似乎在功能组件中被正确调用，并且我还在其他组件中以相同的方式使用了相同的钩子，并且它们不会出错。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）