事件处理程序抛出无效的钩子调用错误

如何解决事件处理程序抛出无效的钩子调用错误

我正在学习 React 并试图在子组件中实现一个简单的 onClick 按钮，只是为了得到一个“无效的钩子调用”。我已经删除了很多程序来隔离问题。

父组件：

import React,{ useState } from "react";
import Menubar from '../Menubar/Menubar'

function SortingVisualizer() {
    const [arr,setArr] = useState([]);

    function newArray() {
        const tempArr = [];
        for(let i = 0; i < 100; i++) {
            tempArr.push(Math.floor(Math.random() * 100) + 5)
        }
        setArr(tempArr);
    }

    return (
        <div id="main-container">

            <Menubar
                data={arr}
            />

        </div>
    )
}

export default SortingVisualizer;

另一个模块中的子组件：

import React from "react";

import newArray from '../SortingVisualizer/SortingVisualizer'
import bubbleSort from '../algorithms/bubbleSort'

function Menubar(props) {
return(
    <div id="menubar-container">
        <button id="new-array-button" onClick={() => newArray()}>New Array</button> // Invalid hook error
        <button id="bubble-sort-button" onClick={() => bubbleSort(props.data)}>Bubble Sort</button> // Works fine
    </div>
    )
}

export default Menubar;

当我运行“npm ls react-dom”时，我只返回一个版本，这应该意味着我没有版本不匹配的问题：

`-- react-dom@17.0.2 

我怀疑我违反了一些钩子规则，但不确定是哪一个。如果我不得不猜测，基于我看到的另一个问题，我认为这与钩子只能在顶层使用这一事实有关。我认为我的 onClick for newArray 以某种方式滥用了该钩子规则。

但我不明白的另一件事是……“导入 newArray……”不应该足以使用另一个模块中的函数吗？这不是在普通 javascript 中的工作方式，其中一个模块可以通过导入/导出来使用另一个模块的功能？

解决方法

你不能导入这样的函数。您必须将函数传递给子组件。

在父组件中

// SortingVisualizer.js

export const SortingVisualizer = () => {
    const [arr,setArr] = useState([]);
    const newArray = () => {
      // ...
    }

    return (
      <div id="main-container">
        <Menubar data={arr} newArray={newArray} />
      </div>
    )
}

在子组件中

// import newArray from '../SortingVisualizer/SortingVisualizer'; Remove that line
import bubbleSort from '../algorithms/bubbleSort'

const Menubar = ({ newArray }) => {
return(
    <div id="menubar-container">
        <button id="new-array-button" onClick={() => newArray()}>New Array</button>
        <button id="bubble-sort-button" onClick={() => bubbleSort(props.data)}>Bubble Sort</button> // Works fine
    </div>
    )
}

,

要将函数传递给子组件，可以将其作为 props 传递

<Menubar
  data={arr}
  newArray={newArray}
/>

然后在子组件中，从 props 调用函数

const { newArray } = props;
return (
    <div id="menubar-container">
    <button id="new-array-button" onClick={newArray}>New Array</button>

,

我不确定这是否是最好的解决方案，但您也可以创建一个钩子

// useArray.js

import {useState} from "react"

const useArray = () => {
  const [arr,setArray] = useState([])

  function newArray() {
    const tempArr = [];
    for(let i = 0; i < 100; i++) {
      tempArr.push(Math.floor(Math.random() * 100) + 5)
    }
    setArr(tempArr);
  }

  return {
   newArray,arr
  }
}

export default useArray

即使在你的例子中我不明白为什么不把你的状态放在你的子组件中，因为你的父母不使用它

//Child component
import React from "react";

import bubbleSort from '../algorithms/bubbleSort'

function Menubar() {

const [arr,setArr] = useState([]);

const newArray = () => {
   // ...
}

return(
    <div id="menubar-container">
        <button id="new-array-button" onClick={newArray}>New Array</button>
        <button id="bubble-sort-button" onClick={() => bubbleSort(arr)}>Bubble Sort</button>
    </div>
    )
}

export default Menubar;