从外部 function 调用 React state 方法

Question

我正在构建一个使用一些 state 变量的 React 功能组件，我试图从按钮单击事件调用的外部 function 修改其中一些变量，但是当我将对 state 方法的引用传递给这个外部 function 时，所有这些都是未定义的。 可能是什么原因？ 如果我只是将完全相同的代码放入功能组件中，它会按预期完美运行。

import React from "react";
import {CodeArea, Table, EmptyField, Button} from '../util/util.js'
import {Step, Load} from "./buttons.js" // The external function in question, Loadfunction 

Core(props){
    const registersInitial = new Array(32).fill(0);
    let buttonNamesInitial = ['LOAD','play', 'step-forward', 'run-to', 'step-back','pause','halt', 'rerun', 'add'];

    const [bigText, setText] = React.useState();
    const [registers, setRegisters] = React.useState(registersInitial);
    const [running, setRunning] = React.useState(false);
    const [programCounter, setProgramCounter] = React.useState(0);
    const [buttonNames, setButtonNames] = React.useState(buttonNamesInitial);
    const [lines, setLines] = React.useState([]);

    const getBigText = () => {
        return bigText;
    }
    const getRunning = () =>{
        return running;
    }
    const getButtonNames = () => {
        return buttonNames;
    }
    
    //... some code here thats irrelevant
    
    function getQuickbarContents(){
        let functions = [ //Backend will come here
            () => Load(setRunning, getRunning, setButtonNames, getButtonNames, setProgramCounter, setLines, getBigText), //Where Load gets called
            () => console.log("code running..."),
            () => console.log("stepping to next line..."),
            () => console.log("running to location..."),
            () => console.log("stepping..."),
            () => console.log("pausing..."),
            () => console.log("halting..."),
            () => console.log("running again..."),
            () => console.log("select widget to add...")
        ]
        let contents = [];
        let row = [];
        for (let i = 0; i<9; i++){
            row.push(<Button onClick ={functions[i]} className='quickbar' name={buttonNames[i]}/>);
            contents.push(row);
            row = [];
        }
        return contents
    }
    
    const divs = [];
    
    let buttons = getQuickbarContents();
    divs.push(<div key='left' className='left'><Table name='quickbar' rows='7' cols='1' fill={buttons}/> </div>);
    
    //... some more code to push more components do divs
    
    return divs;}
export default Core;`

按钮看起来像这样：

function Button({onClick, className, name}){
    return <button onClick={onClick} className={className} name={name}>{name}</button> 
}

并像这样加载：

export function Load({setRunning, getRunning, setButtonNames, getButtonNames, setProgramCounter, setLines, getBigText}){
    let newButtonName;
    if (!getRunning()){ // Functions errors out with getRunning() undefined 
        herenewButtonName = "Reload";
    }
    else{ //while running if user wants to reload
        newButtonName = "LOAD";
    }

    let lines = getBigText().split(/\n/);
    setLines(lines);
    setProgramCounter(0);
    setRunning(!getRunning());
    
    const newButtonNames = getButtonNames().map((value, index) =>{
        if (index === 0){
            return (newButtonName);
        }
        return value;
    })
    
    setButtonNames(newButtonNames);
}

所以基本上在我的脑海中流程应该是： state 方法初始化 -> 创建按钮组件 -> 等待点击按钮 -> 更新 state 变量但显然，一路上出了问题。

我试过使用检查模式调试，这表明实际上加载的所有参数在评估时都是未定义的。

请注意，如果我像这样更改代码，一切都会按预期工作，例如。 只需将整个 function 放在 React 组件中；

//... everything same as before
function getQuickbarContents(){
        let functions = [
            () =>{
                let newButtonName;
                if (!getRunning()){ //User clicks to start running
                    newButtonName = "Reload";
                }
                else{
                    newButtonName = "LOAD";
                }
            
                let lines = getBigText().split(/\n/);
                setLines(lines);
                setProgramCounter(0);
                setRunning(!getRunning());
            
                const newButtonNames = getButtonNames().map((value, index) =>{
                    if (index === 0){
                        return (newButtonName);
                    }
                    return value;
                })
            
                setButtonNames(newButtonNames)},
            () => console.log("code running..."),
            () => console.log("stepping to next line..."),
            () => console.log("running to location..."),
            () => Step(setRegisters, registers, setProgramCounter, programCounter, lines[programCounter]),
            () => console.log("pausing..."),
            () => console.log("halting..."),
            () => console.log("running again..."),
            () => console.log("select widget to add...")
        ]
//...everything same as before

因此，错误出在我将参数传递给 Load 的方式中，或者我正在做一些我不应该在 React 中做的事情。 无论哪种方式，我都不知道，有什么想法吗？

Answer 1

正如@robin_zigmond 指出的那样，问题在于在 Load 中定义参数的方式。 现在修好了。