为什么我打了一个无效的钩子调用？

IT技术 javascript reactjs
2021-05-12 13:46:05

嗨，我是 React 的新手，所以请耐心等待。有人能告诉我为什么我打了一个无效的挂机电话吗？我认为问题与 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;
2个回答

Hooks 只能用在功能组件的主体中。您在文件的顶层有这些行，根本不在任何组件中：

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

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

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

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

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

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 />);
其它你可能感兴趣的问题
上一篇如何在 React 材料表中添加/覆盖页脚组件？ 下一篇无法在数组中识别组件