如何将子函数中的setState1导出至其他React函数组件中使用？

首先你的代码存在几个关键问题，导致无法导出setState1：

• 语法错误：fun 2() 是无效的函数声明，函数名不能包含空格，应该写成function fun2()或箭头函数
• Hook使用违规：useState必须在函数组件的顶层作用域调用，不能嵌套在内部函数里（违反React Hook规则）
• 作用域问题：setState1是内部函数fun2的局部变量，外部无法直接访问，更不能直接导出

要在其他组件中使用setState1，推荐以下两种实用方案：

方案1：使用React Context（全局/跨组件共享） #

这是跨层级组件共享状态和更新方法的标准方式：

import React, { createContext, useState, useContext } from 'react';

// 1. 创建状态Context
const State1Context = createContext();

// 2. 编写Context提供者组件，封装状态和更新方法
export function State1Provider({ children }) {
  // 把状态放在顶层组件作用域
  const [state1, setState1] = useState({});

  return (
    <State1Context.Provider value={{ state1, setState1 }}>
      {children}
    </State1Context.Provider>
  );
}

// 3. 自定义Hook，简化其他组件的调用
export function useState1() {
  const context = useContext(State1Context);
  if (!context) {
    throw new Error('useState1必须在State1Provider内部使用');
  }
  return context;
}

在其他组件中使用： #

import { useState1 } from './你的Context文件路径';

function OtherComponent() {
  // 直接获取setState1
  const { setState1 } = useState1();

  const updateState = () => {
    setState1({ name: '更新后的值' });
  };

  return <button onClick={updateState}>更新状态</button>;
}

别忘了在根组件或父组件外层包裹State1Provider：

import { State1Provider } from './你的Context文件路径';

function App() {
  return (
    <State1Provider>
      {/* 所有需要访问状态的组件都放在这里 */}
      <OtherComponent />
    </State1Provider>
  );
}

方案2：状态提升（父子组件共享） #

如果只是在父子组件之间传递setState1，直接把状态提升到父组件，通过props传递即可：

// 父组件（状态所在的地方）
function ParentComponent() {
  const [state1, setState1] = useState({});

  // 通过props把setState1传给子组件
  return <ChildComponent updateState={setState1} />;
}

// 子组件（使用setState1的地方）
function ChildComponent({ updateState }) {
  return <button onClick={() => updateState({ key: '新值' })}>更新状态</button>;
}

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