Fortigate配置工具开发：从外部组件向useEffect传数据的问题

我正在开发一个用于学校项目的Fortigate防火墙配置助手，当前遇到的问题是：无法从Ports40F.js组件向Fortigate.js页面中的useEffect Hook传递端口配置数据。

相关文件代码 #

1. Fortigate.js（路径：forticonfigurator/src/pages/Fortigate.js） #

该文件中的useEffect负责拉取配置模板并替换占位符，目前需要加入端口配置数据的处理：

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get(`http://localhost:3000/configFiles/${selectedConfig}`);
      const regexHostname = new RegExp('{hostname}', 'g');
      const regexIdleTime = new RegExp('{idletimeout}', 'g');
      const replacedText = response.data
        .replace(regexHostname, hostname)
        .replace(regexIdleTime, idleTime)
        .replace('{policy}', policy ? Policy() : '')
        .replace('{services}', services ? Services() : '')
        .replace('{vpnuser}', vpnUser ? VPNUser() : '')
        .replace('{sipalg}', sipAlg ? SipAlg() : '');
        
        setContent(replacedText)
    } catch (error) {
      console.log(error);
    }
  };
  fetchData();
}, [selectedConfig, hostname, policy, services, vpnUser, sipAlg, idleTime]);

2. Ports40F.js（路径：forticonfigurator/src/components/ports/Ports40F.js） #

该组件管理着用户输入的端口配置数据portConfigs，需要将其传递给上述useEffect：

// some imports
import IntA from "../standardconfigs/portconfig/IntA";

export default function Ports40F() {

  const [selectedPort, setSelectedPort] = useState(null);
  const [isActive, setIsActive] = useState(null)
  const [enableDhcp, setEnableDhcp] = useState("disable")
  console.log(enableDhcp)


  // user input variables array
  const [portConfigs, setPortConfigs] = useState([
    { portNumber: 1, activate:'', portAlias_1:'', ipaddress_1:'', intNetmask_1: '', https_1:"", ping_1:"", addressRangeFrom_1:'',addressRangeTo_1:'', dhcpNetmask_1:'', dnsServer1_1:'', dnsServer2_1:''},
    { portNumber: 2, activate:'', portAlias:'', ipaddress:'', Netmask: '', https:"", ping:"", addressRangeFrom:'',addressRangeTo:'', netmask:'', dnsServer1:'', dnsServer2:''},
    { portNumber: 3, activate:'', portAlias:'', ipaddress:'', Netmask: '', https:"", ping:"", addressRangeFrom:'',addressRangeTo:'', netmask:'', dnsServer1:'', dnsServer2:''},
    { portNumber: "A", activate:'', portAlias:'', ipaddress:'', Netmask: '', https:"", ping:"", addressRangeFrom:'',addressRangeTo:'', netmask:'', dnsServer1:'', dnsServer2:''},
    { portNumber: "WAN", activate:'', portAlias:'', ipaddress:'', Netmask: '', https:"", ping:"", addressRangeFrom:'',addressRangeTo:'', netmask:'', dnsServer1:'', dnsServer2:''},
  ]);
  
  const handlePortClick = (portNumber) => {
    if (portNumber === selectedPort) {
      setSelectedPort(null);
      setIsActive(false);
    } else {
      setSelectedPort(portNumber);
      setIsActive(true);
    }
  }

  const handleConfigChange = (e, configKey) => {
    const updatedPortConfigs = [...portConfigs];
    const index = updatedPortConfigs.findIndex(config => config.portNumber === selectedPort);
    updatedPortConfigs[index][configKey] = e.target.value;

    if (configKey === 'activate') {
      updatedPortConfigs[index][configKey] = e.target.checked;
    }
    setPortConfigs(updatedPortConfigs);
  }
}

可行解决思路 #

1. 状态提升（最直接的React跨组件传值方式） #

• 在Fortigate.js中定义portConfigs状态及更新函数，通过props传递给Ports40F组件：

  // Fortigate.js
  const [portConfigs, setPortConfigs] = useState([/* 初始值与Ports40F内一致 */]);
  // 渲染Ports40F时传入props
  <Ports40F portConfigs={portConfigs} setPortConfigs={setPortConfigs} />
  

• 修改Ports40F组件，移除内部的portConfigs状态定义，直接使用父组件传入的props：

  // Ports40F.js
  export default function Ports40F({ portConfigs, setPortConfigs }) {
    // 其余逻辑保持不变
  }
  

• 将portConfigs加入Fortigate.js中useEffect的依赖数组，同时在模板替换逻辑中新增端口配置的占位符处理（比如.replace('{ports}', generatePortConfig(portConfigs))）：

  useEffect(() => {
    // ...原有逻辑
  }, [...原有依赖, portConfigs]);
  

2. Context API（适合跨多层组件传递场景） #

如果Fortigate.js与Ports40F之间存在多层组件嵌套，状态提升过于繁琐，可使用Context共享状态：

• 创建配置上下文文件src/contexts/ConfigContext.js：

  import { createContext, useContext, useState } from 'react';
  
  const ConfigContext = createContext();
  
  export function ConfigProvider({ children }) {
    const [portConfigs, setPortConfigs] = useState([/* 初始值 */]);
    // 可同时放入其他需要共享的状态（如hostname、idleTime等）
    const value = { portConfigs, setPortConfigs };
    return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;
  }
  
  export function useConfig() {
    return useContext(ConfigContext);
  }
  

• 在项目入口用ConfigProvider包裹组件树，确保所有需要共享状态的组件都能访问到上下文：

  // App.js
  import { ConfigProvider } from './contexts/ConfigContext';
  
  function App() {
    return (
      <ConfigProvider>
        {/* 路由或其他组件 */}
      </ConfigProvider>
    );
  }
  

• 在Ports40F.js和Fortigate.js中通过useConfig获取状态和更新函数：

  // Ports40F.js/Fortigate.js
  import { useConfig } from '../../contexts/ConfigContext';
  
  // 在组件内部使用
  const { portConfigs, setPortConfigs } = useConfig();
  

3. 自定义Hook封装逻辑 #

将端口配置的状态和操作逻辑封装成自定义Hook，方便在多个组件中复用：

• 创建src/hooks/usePortConfig.js：

  import { useState } from 'react';
  
  export default function usePortConfig() {
    const [portConfigs, setPortConfigs] = useState([/* 初始值 */]);
    
    const handleConfigChange = (e, configKey, selectedPort) => {
      const updatedPortConfigs = [...portConfigs];
      const index = updatedPortConfigs.findIndex(config => config.portNumber === selectedPort);
      updatedPortConfigs[index][configKey] = configKey === 'activate' ? e.target.checked : e.target.value;
      setPortConfigs(updatedPortConfigs);
    };
  
    const handlePortClick = (portNumber, selectedPort, setSelectedPort, setIsActive) => {
      if (portNumber === selectedPort) {
        setSelectedPort(null);
        setIsActive(false);
      } else {
        setSelectedPort(portNumber);
        setIsActive(true);
      }
    };
  
    return { portConfigs, handleConfigChange, handlePortClick };
  }
  

• 在Ports40F.js和Fortigate.js中调用该Hook，直接获取端口配置数据：

  // Ports40F.js
  import usePortConfig from '../../hooks/usePortConfig';
  
  export default function Ports40F() {
    const [selectedPort, setSelectedPort] = useState(null);
    const [isActive, setIsActive] = useState(null);
    const [enableDhcp, setEnableDhcp] = useState("disable");
    const { portConfigs, handleConfigChange, handlePortClick } = usePortConfig();
    
    // 调用handlePortClick和handleConfigChange时传入对应参数即可
  }
  

内容的提问来源于stack exchange，提问作者Chicho