如何在反应中从另一个文件设置状态变量

Question

我在这样声明的“第一个文件”中有一个状态变量“day”：

const [day, setDay] = useState('');

试图清理我的代码我必须将“setDay”的代码移动到另一个我称之为服务的文件中，我想要我的程序的所有数据库内容。

我的问题是如何从另一个文件访问 setDay 方法并能够用我的数据库的结果填充它。 提前谢谢。

Answer 1

这被称为提升状态，它在反应文档中提到。

Answer 2

一般情况下， useState应该只在组件中调用。

如果你想拥有一个集中的状态文件，那么看看 React Context 或者像 MobX 这样的状态库。

如果您只想将组件的useState部分（仅在该组件中使用）拆分到另一个文件中，请查看创建自定义钩子。

Answer 3

为更改日期创建子组件。 这是您将访问从父组件传递的setDay函数的地方

ChangeDay.js

export const ChangeDay = ({ onHandleDay }) => {
  return (
    <div className="App">
      <h2>Button below to change:</h2>
      <button onClick={() => onHandleDay("TUESDAY")}>CLICK ME</button>
    </div>
  );
};

然后在 App.js onHandleDay App.js传递给setDay道具。

import { useState } from "react";
import { ChangeDay } from "./ChangeDay";

export default function App() {
  const [day, setDay] = useState("Monday");

  return (
    <div className="App">
      <h1>Hello {day}</h1>
      <ChangeDay onHandleDay={setDay} />
    </div>
  );
}

工作演示