Question

今天我已经完成了我的第一个React App-计算器。

尽管最好将App.js清理干净并将所有逻辑功能放置在单独的文件Logic.js中，也将所有设计功能放置在所有设计功能中（根据数字的长度或单击动画上的按钮来更改输出字体的大小）），例如Effects.js。

当我使用函数时，出现了问题，将它们放置在新文件中（当然，将它们导出并也将它们导入到app.js中）。

错误表明 setNumber（当我想使用状态时调用的方法），

number.firstNumber（保存首次点击的数字的firstNumber状态）

并且在此文件中调用的每个状态（函数或条件）均未定义，因此这意味着该文件无法访问App.js状态。有什么办法可以使这些功能分开，而不必重新构建整个应用程序，从而可以实现干净的代码？

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";
}
}

谢谢，链接，以便您可以查看完整的代码

https://codesandbox.io/embed/youthful-platform-n6lvs?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

Answer 1

您可以将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指南here。

Answer 2

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

您要尝试的操作称为自定义钩子，我将为您提供一个示例，您可以在其中进行反思：

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);

Answer 3

首先，将事情分开很有意义，除非您要管理组件的状态。这里的理由是，状态由包含镜头变量的组件完全管理，在您的情况下为[number, setNumber]。具有从组件从外部调用这些函数的函数会产生一个大的红色标记，并且您已经注意到这是行不通的。

它不起作用的原因是范围问题。函数turnOnOrange不会在组件本身的范围内被调用。在使用功能组件时，this的意义很小，因此即使turnOnOrange.call(this, operator)也不会有太大帮助。

因此，尽管我为您想分开自己的逻辑而称赞，但在这种情况下，它对您不利，如果您考虑一下，实际上并不是很直观。您的函数turnOnOrange绝对属于该组件内部。

Answer 4

我认为自从Hook诞生共享状态以来，您就可以定义自己的钩子来管理部分状态。这是示例之一：

yourHook.js


export function colorHook(initValue) {
  const [color, setColor] = React.useState(initValue);

  // Define whatever you want
  const setOrange = () => setColor({ isYellow: true }) 

  return [color, setColor, setOrange, // pass more ];
}

在您的主文件中：


import { colorHook } from "./yourHook";

function yourComponent() {
  const [color, setColor, setOrange] = colorHook({ /* your value */ }) 
}

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

4 个答案: