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

我正在学习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;

我怀疑我违反了一些钩规则，但不确定是哪一条。如果我不得不猜测，基于我看到的另一个问题，我认为这与挂钩只能在顶层使用这一事实有关。我认为我对newArray的onClick错误地使用了hook规则

---

但我不明白的是…难道“导入新数组…”不足以使用另一个模块的函数吗？在普通javascript中，一个模块只需导入/导出即可使用另一个模块的功能，这难道不是它的工作方式吗？

要将该功能传递给子组件，可以将其作为道具传递

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

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

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

const{newArray}=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>

const{newArray}=props；
返回(
新阵列

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

在父组件中

//SortingVisualizer.js
导出常量排序可视化工具=（）=>{
const[arr，setArr]=useState（[]）；
常量newArray=（）=>{
// ...
}
返回(
)
}

在儿童部分

//从“../SortingVisualizer/SortingVisualizer”导入新数组；删除该行
从“../algorithms/bubbleSort”导入bubbleSort
常量菜单栏=（{newArray}）=>{
返回(
newArray（）}>新数组
bubbleSort（props.data）}>Bubble排序//工作正常
)
}

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

在父组件中

//SortingVisualizer.js
导出常量排序可视化工具=（）=>{
const[arr，setArr]=useState（[]）；
常量newArray=（）=>{
// ...
}
返回(
)
}

在儿童部分

//从“../SortingVisualizer/SortingVisualizer”导入新数组；删除该行
从“../algorithms/bubbleSort”导入bubbleSort
常量菜单栏=（{newArray}）=>{
返回(
newArray（）}>新数组
bubbleSort（props.data）}>Bubble排序//工作正常
)
}

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

// 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

//useArray.js
从“react”导入{useState}
常量useArray=（）=>{
常量[arr，setArray]=useState（[]）
函数newArray（）{
常数tempArr=[]；
for（设i=0；i<100；i++）{
tempArr.push（Math.floor（Math.random（）*100）+5）
}
setArr（tempArr）；
}
返回{
新阵列，
啊
}
}
导出默认useArray

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

//子组件
从“React”导入React；
从“../algorithms/bubbleSort”导入bubbleSort
函数Menubar（）{
const[arr，setArr]=useState（[]）；
常量newArray=（）=>{
// ...
}
返回(
新阵列
气泡排序（arr）}>气泡排序
)
}
导出默认菜单栏；

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

// 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

//useArray.js
从“react”导入{useState}
常量useArray=（）=>{
常量[arr，setArray]=useState（[]）
函数newArray（）{
常数tempArr=[]；
for（设i=0；i<100；i++）{
tempArr.push（Math.floor（Math.random（）*100）+5）
}
setArr（tempArr）；
}
返回{
新阵列，
啊
}
}
导出默认useArray

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

//子组件
从“React”导入React；
从“../algorithms/bubbleSort”导入bubbleSort
函数Menubar（）{
const[arr，setArr]=useState（[]）；
常量newArray=（）=>{
// ...
}
返回(
新阵列
气泡排序（arr）}>气泡排序
)
}
导出默认菜单栏；

通过执行

onClick={newArray}

，您假定

newArray

将单击事件作为函数的参数，因为

onClick={newArray}

====

onClick={e=>newArray（e）}

。在

newArray

函数的定义中，没有任何参数。这是不相关的，因为函数不使用参数。通过执行

onClick={newArray}

，您假设

newArray

将单击事件作为函数的参数，因为

onClick={newArray}

=

onClick={e=>newArray（e）}

。在

newArray

函数的定义中，没有任何参数。这与此无关，因为函数不使用这些参数。