Question

我已经创建了一个基于钩子的功能组件，并试图将该功能组件导入基于类的组件中，但是我在错误下面得到了这个提示

功能组件代码：-

import React, { useState } from "react";

const SearchBar = () => {
  const [searchBtn, setSearchBtn] = useState(false);

  return (
    <div className="search-bar">
      <input className="search-text" type="text" placeholder="Search..." />
      {searchBtn ? (
        <button
          title="Back"
          onClick={() => setSearchBtn(false)}
          className="search-btn "
        />
      ) : (
        <button
          title="Search"
          onClick={() => setSearchBtn(true)}
          className="search-btn "
        />
      )}
    </div>
  );
};

export default SearchBar;

我正在使用react-dom版本：16.8.6

Answer 1

挂钩规则

仅顶层呼叫挂钩

请勿在循环，条件或嵌套函数中调用Hook。相反，请始终在React函数的顶层使用Hook。通过遵循此规则，可以确保每次渲染组件时都以相同的顺序调用Hook。这就是让React在多个useState和useEffect调用之间正确保留Hook的状态的原因。（如果您感到好奇，我们将在下面进行详细说明。）

为了更好地理解，请检查此https://reactjs.org/docs/hooks-rules.html

Answer 2

您的组件没有任何问题。对于您的错误，最常见的情况是使用某些第三方组件，该组件期望函数呈现某些内容（并将其作为函数调用），而不是react组件：

// how you expect it to be called
<SearchBar />
...
// how it is actually called
{SearchBar()}

如果是这种情况，请将其从someProp={SearchBar}更改为someProp={() => <SearchBar />}

在类组件中导入功能组件

2 个答案: