Javascript 如何访问另一个文件中函数的状态

今天我完成了我的第一个React应用程序-计算器

我认为最好将App.js清理干净，将所有逻辑函数放在单独的文件logic.js中，并将所有设计函数（根据数字长度或点击动画按钮的长度更改输出字体大小）放在例如Effects.js中

当我获取函数，将它们放在新文件中时出现了问题（当然导出了它们，也将它们导入了app.js）

错误说明 setNumber（当我想处理state时调用的方法）

number.firstNumber（保存第一个单击的数字的firstNumber状态）

而且我在这个文件中调用的每个状态（函数或条件）都没有定义，所以这意味着这个文件无法访问App.js state。有没有什么方法可以让这些功能分开，而不必重新构建整个应用程序，这样我就可以实现干净的代码

App.js创建我在这些功能中使用的状态

const [number, setNumber] = useState({
firstNumber: "",
secondNumber: "",
operator: "",
result: "0",
displayed: "0",
cButton: "AC",
cButtonCheck: false,
numToReset: false,
sizeOfOutput: "1em",
isOrange: false
});

未定义新文件中获取setNumber错误的函数示例

function turnOnOrange(operator) {
if (number.isOrange === false)     {
  setNumber(prevState => ({
    ...prevState,
    isOrange: true,
    whichOrange: operator
  }));
  operator.className = "orangeActivated";
}
}

谢谢，链接，这样你就可以看到整个代码了

---

您应该从函数返回这些变量并导出函数，反之亦然

您正在尝试的是所谓的定制挂钩，我将给您一个示例，您可以在其中思考：

useMyFirstCustomHook.js file
import React, { useState } from 'react';

const useMyFirstCustomHook = () => {
  const [count, setCount] = useState(0);
  // do some stuff
  return { count, setCount };
};

export default useMyFirstCustomHook;

App.js file
//..
import useMyFirstCustomHook from 'path/to/useMyFirstCustomHook';
//..
const { count, setCount } = useMyFirstCustomHook();
console.log(count);

---

首先，分离事物很有意义，除非您试图管理组件的状态。这里的理由是，状态完全由包含lense变量的组件管理，在您的例子中

[number，setNumber]

。如果有一个函数从组件外部调用这些函数，就会发出一个很大的危险信号，正如您所注意到的，这是行不通的

它不起作用的原因是范围问题。将不会在组件本身的范围内调用函数

turnOnOrange

。当您使用函数组件时，

此

几乎没有什么意义，因此即使是

TurnOnRange.call（此，运算符）

也不会有多大帮助

---

所以，虽然我为你想要分离出你的逻辑而鼓掌，但在这种情况下，它是对你不利的，如果你仔细想想，它实际上不是非常直观的。您的函数

turnOnOrange

绝对属于该组件。

我认为您可以定义自己的钩子来管理部分状态，因为钩子生来就是为了共享状态。以下是一个示例：

yourHook.js

导出函数colorHook（initValue）{
const[color，setColor]=React.useState（initValue）；
//定义你想要的任何东西
常量setOrange=（）=>setColor（{isYellow:true}）
返回[color，setColor，setOrange，//传递更多]；
}

在主文件中：

从“/yourHook”导入{colorHook}；
函数组件（）{
const[color，setColor，setOrange]=colorHook（{/*您的值*/}）
}

您可以将

App.js

中的单个状态对象拆分为多个可管理的内聚状态，然后创建自己的自定义挂钩，该挂钩将操作刚刚拆分的状态的一部分

例如，对于

turnOnOrange

函数，您可以在其自己的文件中创建名为

useOrangeHook

的新钩子，并将其导入并用作钩子：

import React, { useState } from "react";

export default function useOrangeHook(operator) {
  const [orangeState, setOrangeState] = useState({
    isOrange: false,
    whichOrange: ""
  });
  if (!orangeState.isOrange) {
    setOrangeState(prevState => ({
      ...prevState,
      isOrange: true,
      whichOrange: operator
    }));
    operator.className = "orangeActivated";
  }
  return orangeState;
}

---

自定义挂钩是重用有状态逻辑的机制。查看React指南。

谢谢您的回答。我的想法和你们一样，因为我想从主文件中分离出来的每个函数都在条件中使用状态，所以正如你们所说的，这些函数只属于那个里。我只是想知道最终版本是否美观、干净、可读，这个问题就出现了。好吧，这里的另一个答案为您提供了一个使用自定义挂钩的非常好的解决方案，请从@fullstackguy查看这个问题的伟大答案，这是一个非常好的方法来完成您所寻找的@pinncit感谢您的答案。所以，如果我做对了，我必须从app.js中删除所有状态，创建它们并在另一个文件中使用它们，我将导出它们？（对于本例，isOrange和whichrange）将从App.js中删除并在新文件中创建，就像您在回答中向我展示的一样@满栈Guy@Pinnci是的，您需要将App.js中的单个状态对象拆分为逻辑内聚状态，由您的自定义挂钩管理。但存在一个问题。几乎每个函数都链接到另一个函数。我的意思是，例如，TurnOnRange（运算符）在运算符（e）函数中被调用，当单击+-/*时调用该函数。所以我不理解这个概念，我应该如何区分这些状态，这样我仍然能够调用函数内部的函数，等等..例如，从运算符函数传递给TurnOnRange的值“operator”就是我单击的那个特定按钮。对不起，我是个新手，还不太了解像这样复杂的事情。