React跨JS文件修改useState变量问题求助

你的代码里存在几个关键问题，导致无法跨模块更新状态：

• 循环导入：file1和file2互相导入，模块依赖混乱，根本没法正确访问组件内部的状态更新函数
• 错误调用更新函数：直接在onChange里写file1.set_data(...)，一来组件函数本身不会暴露内部的set_data，二来这样写会在组件渲染时就立刻执行，不是输入变化时才触发
• 组件渲染错误：{form1 && form.form2}没以React组件标签的形式调用，应该写成<Form2 />

下面给你两种可行的解决方案：

方案一：通过Props传递状态与更新函数（适合层级浅的场景） #

这是最直接的方式，父组件把状态和更新函数通过props传给子组件即可。

修改后的file1.js #

import React, { useState } from "react";
import { Form2 } from "./file2";

// 组件名首字母大写，符合React规范
function File1() {
  const [form1, setForm1] = useState(true);
  const [data, setData] = useState({ Base_size: null });

  return (
    <div>
      {/* 以组件标签渲染，同时把状态和更新函数传给子组件 */}
      {form1 && <Form2 data={data} setData={setData} />}
    </div>
  );
}

export default File1;

修改后的file2.js #

// 不用导入file1，直接通过props接收需要的状态和函数
export const Form2 = ({ data, setData }) => {
  const handleInputChange = (e) => {
    // 用函数式更新，保留原有状态的其他属性
    setData(prev => ({ ...prev, Base_size: e.target.value }));
  };

  return (
    <div>
      <form>
        Base Size:{" "}
        <input
          type="number"
          onChange={handleInputChange}
          name="Base_size"
          value={data.Base_size || ""} // 绑定当前值，做成受控组件
        />
      </form>
    </div>
  );
};

方案二：使用React Context（适合层级深的场景） #

如果你的组件层级比较复杂，props层层传递太麻烦，可以用Context来共享状态。

先创建Context文件（比如FormContext.js） #

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

const FormContext = createContext();

// 封装Provider组件，管理状态
export function FormProvider({ children }) {
  const [data, setData] = useState({ Base_size: null });

  return (
    <FormContext.Provider value={{ data, setData }}>
      {children}
    </FormContext.Provider>
  );
}

// 自定义Hook，方便其他组件获取Context
export function useFormContext() {
  return useContext(FormContext);
}

修改file1.js #

import React, { useState } from "react";
import { Form2 } from "./file2";
import { FormProvider } from "./FormContext";

function File1() {
  const [form1, setForm1] = useState(true);

  return (
    {/* 用Provider包裹所有需要共享状态的组件 */}
    <FormProvider>
      <div>
        {form1 && <Form2 />}
      </div>
    </FormProvider>
  );
}

export default File1;

修改后的file2.js #

import { useFormContext } from "./FormContext";

export const Form2 = () => {
  // 用自定义Hook拿到状态和更新函数
  const { data, setData } = useFormContext();

  const handleInputChange = (e) => {
    setData(prev => ({ ...prev, Base_size: e.target.value }));
  };

  return (
    <div>
      <form>
        Base Size:{" "}
        <input
          type="number"
          onChange={handleInputChange}
          name="Base_size"
          value={data.Base_size || ""}
        />
      </form>
    </div>
  );
};

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