小编Eri*_*c S的帖子

组件在父状态更改时卸载

我正在使用 React 16.8.2,并且每当应用程序组件中的状态发生更改时,我的组件的子组件都会卸载。

这是场景:

  • 我有 App.jsx(一个功能组件)和一些状态变量(useState)
  • 其中一些状态变量的 setter 通过 Context 提供者(后代中的 useContext)沿树向下传递
  • 我有一个菜单组件(应用程序的后代),它调用这些设置器来(例如)显示一个模态对话框
  • 我有一个模态对话框组件(App 的子组件),它使用状态变量作为属性来确定它是否打开——我认为是标准的 React 东西。

我的问题:当 App 中的任何状态变量发生更改时(当然是通过钩子),App 的子项将被卸载并重新安装 - 即使它们与正在更改的状态没有任何联系。它们不仅仅是重新渲染 - 孩子被卸载并且他们的状态被重新初始化。因此,例如,当它们不应该清除时,我的对话框中的字段会被清除。

这已经是一个相当复杂的应用程序,所以我今天花了很多时间来隔离问题。然后我设置了一个简单的 create-react-app 来尝试在那里复制这种行为 - 但这个测试应用程序的行为就像它应该的那样。更改父状态,无论是通过 prop 回调,还是通过来自子级的上下文提供的回调 - 重新渲染但不卸载/重新安装并且子状态保持不变。

但是在我的真实应用程序中,组件重新安装并且子状态重新初始化。

我已经将它简化到我所能做到的最低限度——我正在通过孩子的上下文设置一个带有“setFoo”的假状态变量“foo”。即使 foo 未被任何组件使用,更改 foo 的值也会导致 App 的子项卸载/重新挂载。

在 App.jsx 中:

const App = props => {
  const [foo, setFoo] = useState(false);
  // ...
  const appControl = {
    toggleFoo: () => setFoo(!foo);
  };
  // ...
  return (
    <AppContext.Provider value={appControl}>
      ... a bunch of stuff not using …
Run Code Online (Sandbox Code Playgroud)

reactjs react-hooks

13
推荐指数
1
解决办法
4120
查看次数

在 Firebase 函数和 React 之间共享代码

我在 React 应用程序中使用 Firebase 函数。我有一些不想复制的重要代码,所以我想在部署的函数和我的 React 客户端之间共享它。我已经在我的 React 客户端本地运行了这个(虽然我没有尝试部署) - 但我无法部署我的功能。

我尝试的第一件事是 npm 链接。这在本地工作,但不会部署函数(这是有道理的,因为这不会在您的 package.json 中留下任何依赖项)。然后我尝试了 npm install ../shared/ - 这看起来很有希望,因为它确实在 package.json 中留下了一个带有 file: 前缀的依赖项 - 但 Firebase 仍然不会部署这个(下面的错误)。

我的项目目录结构如下所示:

/ProjectDir
  firebase.json
  package.json (for the react app)
  /src
    * (react source files)
  /functions
    package.json (for firebase functions)
    index.js
  /shared
    package.json (for the shared module)
    index.js
Run Code Online (Sandbox Code Playgroud)

我的共享模块 package.json(省略了无关的细节):

{
  "name": "myshared",
  "scripts": {
  },
  "dependencies": {
  },
  "devDependencies": {
  },
  "engines": {
    "node": "8"
  },
  "private": true,
  "version": "0.0.1"
}
Run Code Online (Sandbox Code Playgroud)

我的 …

node.js firebase reactjs google-cloud-functions

5
推荐指数
1
解决办法
1310
查看次数

了解 TypeScript 中的通用约束扩展

我正在尝试创建一个通用函数,它接受基类的子类型,并返回解析为指定类的实例的承诺。这个例子展示了我想要实现的目标:

class foo {}
class bar extends foo {}
const someBar = new bar();
function foobar<T extends foo>(): Promise<T> {
  return new Promise<T>(resolve => resolve(someBar)); // this doesn't compile
}
Run Code Online (Sandbox Code Playgroud)

我意识到 TypeScript 使用结构类型,因此在这个简单的示例中它将接受 T 的任何类型。但我不确定为什么它不允许我返回 someBar 的值。

有没有办法实现我在这里想做的事情?谢谢!

我得到的编译器错误是:

const someBar: bar
Argument of type 'bar' is not assignable to parameter of type 'T | PromiseLike<T> | undefined'.
  Property 'then' is missing in type 'bar' but required in type 'PromiseLike<T>'.ts(2345)
lib.es5.d.ts(1393, 5): 'then' is declared here.
Run Code Online (Sandbox Code Playgroud)

更新

根据请求,这里有一些关于我想要完成的任务的附加信息。这段代码编译得很好(我已经向 foo 和 …

generics typescript

2
推荐指数
1
解决办法
7906
查看次数