为什么我会发出无效的挂钩呼叫？答案

【问题标题】：Why am I making an invalid hook call?为什么我会发出无效的挂钩呼叫？
【发布时间】：2020-05-14 23:03:40
【问题描述】：

您好，我是 React 新手，请耐心等待。有人能告诉我为什么我要发出无效的 Hook Call 吗？我认为问题与 useState(null) 或它正在使用的函数有关。下面的代码显示了我试图在任何帮助中使用它的能力。

import React, { useState } from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './horizontalscroll.css';

const data = [
  {
    category: "Brands",
    items: ["Gucci", "Calvin klein", "Prada"]
  },
  {
    category: "Films",
    items: ["Inception ", "Dark Night", "Home Alone"]
  }
];


const [category, setCategory] = useState(null);
const onClick = category => {
    setCategory(category);
  };


// One item component
// selected prop will be passed
const MenuItem = ({ text, selected }) => {
  return (
    <div
      className="menu-item"
    >
      {text}
    </div>
  );
};

// All items component
// Important! add unique key
export const Menu = (list) => list.map(el => {
  const { category } = el;

  return (
    <MenuItem
      text={category}
      key={category}
    />
  );
});


const Arrow = ({ text, className }) => {
  return (
    <div
      className={className}
    >{text}</div>
  );
};


const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

class HorizantScroller extends React.Component {
  state = {
    selected: 0
  };

  onSelect = key => {
    this.setState({ selected: key });
  }


  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = Menu(list, selected);

    return (
      <div className="HorizantScroller">
        <ScrollMenu
          data={menu}
          arrowLeft={ArrowLeft}
          arrowRight={ArrowRight}
          selected={selected}
          onSelect={this.onSelect}
          onClick={onClick}
        />
      </div>
    );
  }
}

export default HorizantScroller;

【问题讨论】：

请展示整个组件声明
我假设您开发了一个功能组件并尝试在其中使用useState 挂钩。如果没有，那就是这种情况。我建议阅读 React 网站上的 Invalid Hook Call Warning 链接。
我已经更新了整个组件
你没有在任何地方使用category，所以即使你的钩子调用是有效的，你想要做的事情并不明显。
钩子调用必须在函数组件内

标签： javascript reactjs

【解决方案1】：

钩子只能用在功能组件的主体中。这些行位于文件的顶层，根本不在任何组件中：

const [category, setCategory] = useState(null);
const onClick = category => {
  setCategory(category);
};

根据您使用 onClick 的位置，我最好的猜测是您希望这是 HorizantScroller 组件的状态，但 HorizantScroller 是一个类组件，而不是一个函数组件，因此您也不能使用它们的钩子。

恐怕根据所提供的信息，我无法提出具体建议，因为不清楚您要做什么。所以我建议决定你希望它成为哪个组件的状态。如果该组件是一个函数组件，则移动其中的代码。如果该组件是类组件，则要么需要转为函数组件，要么需要使用this.state和this.setState进行状态管理。

【讨论】：

【解决方案2】：

首先，在 React 中发布 Hooks 的主要原因是能够在纯函数中设置内部状态。如果您希望使用 react 实现状态，我建议您使用纯函数而不是基于类的函数钩子react hooks documentation

这是文档表单中的一个示例：

import React, { useState } from 'react';

export default function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
  <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
     Click me
   </button>
  </div>
 );
}

并且要使用基于函数的组件，您可以执行以下操作

import ReactDOM from 'react-dom';
import Example from './example/example.js'
ReactDOM.render(<Example />);

【讨论】：