小编Die*_*sel的帖子

缩小未知类型的对象

我在这里阅读了多篇关于缩小TypeScriptobject类型的帖子和问题。unknown但我还没有找到这个具体的问题或解决方案。

我发现大多数解决方案都需要执行类似的操作。

const result: unknown = {
  movieName: "test",
};

if (
  typeof result === "object" &&
  result !== null &&
  "movieName" in result &&
  typeof result.movieName === "string" // <-- Error Here
) {}
Run Code Online (Sandbox Code Playgroud)

错误指出

属性“movieName”在类型“object”上不存在

我如何缩小范围,以便它知道该unknown事物是object包含该属性的movieName?如何访问result.movieName类型unknown

编辑:也许这是不可能的?下面评论中的建议将其声明为 Record<string,unknown> 可能是每个GitHub 请求的唯一方法?

typescript

16
推荐指数
1
解决办法
2610
查看次数

React useEffect() 仅在具有依赖项的第一次渲染时运行

对此还有其他几个 SO 问题,答案是通过 ESLint(我正在使用打字稿)消除依赖项投诉,或者做其他事情以仍然允许 useEffect 的第二个参数为[]. 但是,根据 React文档,不建议这样做。同样在反应 useEffect 文档下它说

如果传递一个空数组 ([]),则效果中的 props 和 state 将始终具有其初始值。虽然传递 [] 作为第二个参数更接近熟悉的 componentDidMount 和 componentWillUnmount 心智模型,但通常有更好的解决方案来避免过于频繁地重新运行效果。另外,不要忘记 React 将 useEffect 的运行推迟到浏览器绘制完成之后,所以做额外的工作不是问题。

我有以下代码:

  useEffect(() => {
    container.current = new VisTimeline(container.current, items, groups, options);
  }, [groups, items, options]);
Run Code Online (Sandbox Code Playgroud)

我希望它只运行一次。

是让它每次运行并useState跟踪它之前运行过的唯一方法:

  const [didLoad, setDidLoad] = useState<boolean>(false);

  useEffect(() => {
    if (!didLoad) {
      container.current = new VisTimeline(container.current, items, groups, options);
      setDidLoad(true);
    }
  }, [didLoad, groups, items, options]);
Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-hooks

10
推荐指数
1
解决办法
1万
查看次数

NextJS 中的摇树包括所有 node_modules 包,即使没有全部使用

下面是 Next JS 中我的包大小的屏幕截图。我想指出的是react-color下部件node_modules。我以这种方式导入它们:

import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';

但是你看它包括了所有我不使用的东西,例如photoshop.jssketch.js等等。

我如何才能不将我不使用的东西与摇树捆绑在一起?

我确实注意到import { debounce } from 'lodash';导入了所有lodashimport debounce from 'lodash/debounce';将包大小减少了 200kB。

在此处输入图片说明

npm typescript lodash reactjs next.js

10
推荐指数
1
解决办法
3734
查看次数

Apollo Client Chrome Devtools Cache Empty with Angular

我有一个 Apollo Angular 客户端应用程序。我写信给商店:

const userQuery = this.userGql.document;
this.apollo.getClient().writeQuery({
  query: userQuery,
  data: { user: result.data.login.user },
});
Run Code Online (Sandbox Code Playgroud)

这有效。然后我从缓存中检索用户并显示数据:

this.user = this.apollo.getClient().readQuery({
  query: this.userGql.document,
}).user;
Run Code Online (Sandbox Code Playgroud)

这也有效。但是,我在 Google Chrome Devtools 中的缓存一直是这样的:

开发工具缓存

为什么这是空的?我想查看我的缓存状态调试。此外,当我转到 GraphiQL 选项卡并选择从缓存中获取时,它会查询 API(我可以判断,因为我没有传递令牌并且它拒绝了未经身份验证的错误的请求)。

编辑,我确实设置connectToDevTools为 true 以防万一:

export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({ uri }),
    cache: new InMemoryCache({
      dataIdFromObject: object => {
        switch (object.__typename) {
          case 'user':
            return object['username'];
        }
      },
    }),
    connectToDevTools: true,
  };
}
Run Code Online (Sandbox Code Playgroud)

apollo apollo-client angular

8
推荐指数
0
解决办法
651
查看次数

与 React 相比,SwiftUI 的逻辑在哪里?

SwiftUI 文档很难找出每个渲染中实际发生的事情/它们发生的时间/导致它们的原因(或者我不知道在哪里看!)

我试图避免构建一个单独的类来执行逻辑并从我的观点中引用它,我只是不明白逻辑的去向,官方教程也没有太多涉及。我正在尝试构建一个像 React 这样的基于组件的系统,其中孩子是独立的并且不必依赖辅助类。

需要明确的是,我认为答案1.如下。


这是我没有得到的。

在反应中,我可以说:

  const [someStateVariable, setSomeStateVariable] = useState("")
  const dependsOnStateVariable = someStateVariable ? 0 : 1;
Run Code Online (Sandbox Code Playgroud)

但在 SwiftUI 中我不能这样做:

@State var someStateVariable: String = ""
var dependsOnSomeStateVariable = someStateVariable ? 0 : 1
Run Code Online (Sandbox Code Playgroud)

使用传入的道具(初始化变量)执行逻辑也是如此。作为反应,我可以用这些道具做事。在 Swift 中,我不能。

  1. 所有这些逻辑都必须进入init吗?我想通过阅读有意义的结构文档,我只想确保我正确理解它。

  2. 关于差异算法和生命周期事件的文档在哪里?什么触发渲染?什么时候init跑?在每次渲染(即传入的属性更改或状态更改)或第一次出现时(我猜测在每次渲染上,因为 onAppear 存在)。

  3. 我如何应对副作用?看起来有点复杂。是否有 useEffect 等价物?只有在更改某些状态或输入变量时才能运行的代码?

reactjs swift swiftui

8
推荐指数
1
解决办法
404
查看次数

UFW 会阻止大多数端口,直到禁用并重新启动后重新启用

我的服务器上运行着 UFW。当我重新启动它时:

$sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
1194/udp                   ALLOW       Anywhere                  
5550                       ALLOW       Anywhere                  
80/tcp                     ALLOW       Anywhere                  
443/tcp                    ALLOW       Anywhere                  
8000                       ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
1194/udp (v6)              ALLOW       Anywhere (v6)             
5550 (v6)                  ALLOW       Anywhere (v6)             
80/tcp (v6)                ALLOW       Anywhere (v6)             
443/tcp (v6)               ALLOW       Anywhere (v6)             
8000 (v6)                  ALLOW       Anywhere (v6)
Run Code Online (Sandbox Code Playgroud)

然而,当我尝试运行它时,我的端口 8000 和 1194 目前被阻止。

当我跑步时:

$sudo ufw disable
$sudo ufw enable
Run Code Online (Sandbox Code Playgroud)

然后端口打开。当我之后运行状态时,它与之前粘贴的完全相同。

ubuntu firewall server ufw

7
推荐指数
3
解决办法
6558
查看次数

一个完整的可观察对象会发生什么?如果我订阅一个已完成的可观察对象怎么办?

我无法确定 Observable 完成后会发生什么情况。我有一个必须在做其他工作之前完成的可观察对象。为此,我的其他函数会订阅该可观察对象,当它完成时,它们就会开始工作。

我的问题是,当他们在Observable 完成后订阅时会发生什么?从我的测试来看,他们似乎获得了最后一个值,然后完成(它触发valuecomplete回调该subscribe方法)。如果它已经完成,我宁愿不订阅它。

有没有办法在不订阅的情况下检查 Observable 是否已完成?完成后我将其设置为未定义,但如果发生这种情况时我从另一个函数订阅了可观察的内容,则会产生问题。

我可以创建一个行为主题isLoaded,该主题一开始为 False,完成后变为 true,但我无法找到有关已完成的可观察对象在订阅时执行的操作以及最佳实践是什么的文档。谢谢你!

编辑:这并不是询问如何检查可观察对象是否完整。它询问的是,如果可观察对象从不同的订阅完成,会发生什么,以及如何检查它是否已完成。当可观察对象完成并且您查看可观察对象时,会发生什么。

rxjs angular

7
推荐指数
1
解决办法
8119
查看次数

在初始化问题之前使用了另一个变量“__”

我在这里搜索过。我已经看到并认为这正在影响它

Swift 中的类初始化是一个两阶段的过程。在第一阶段,每个存储的属性都由引入它的类分配一个初始值。一旦确定了每个存储属性的初始状态,第二阶段就开始,并且每个类都有机会在新实例被认为可供使用之前进一步自定义其存储属性。

当我运行下面的代码时,我收到错误Variable 'self.string' used before being initialized

但它适用于我不会更改为 var 并初始化的每个变量。这里发生了什么?

这是错误:

在此输入图像描述

下面的不行。

struct IntTextField<T: Numeric & LosslessStringConvertible>: View {
    @Binding var number: T?
    @State private var string: String
    private let isDecimalAllowed: Bool

    private let title: LocalizedStringKey
    private let onEditingChanged: (Bool) -> Void
    private let onCommit: () -> Void

    public init(_ titleKey: LocalizedStringKey, number: Binding<T?>, isDecimalAllowed: Bool, onEditingChanged: @escaping (Bool) -> Void = { _ in }, onCommit: @escaping () -> Void = {}) {
        self._number = …
Run Code Online (Sandbox Code Playgroud)

swift swiftui

7
推荐指数
1
解决办法
1431
查看次数

Swift - 使用未解析的标识符'self' - 来自类中的Closure

我试图从我的类中声明的闭包中引用我的类中的属性.我无法从我的闭包中访问self,而且我假设self会在我的闭包内引用Class API.

我想声明一个闭包,我稍后将其用作传递给URLSession dataTask的参数(它没有一个错误行).我收到标题中列出的错误.

使用未解析的标识符"self"

我现在已经写了一整天了,我只是想把它作为一个沙箱,所以我完全期待一些批评.

class Api {

    struct Location {
        var name = String()
        var author = String()
        var averageRating: String?
        var id = Int()
        var lat = Double()
        var lon = Double()
        var type = String()
    }

    var locations = [Location]()

    var doSomething = {(data: Data?, response: URLResponse?, error: Error?) -> Void in
        if error != nil {
            print(error!.localizedDescription)
        } else {
            do {
                if let json = try JSONSerialization.jsonObject(with: data!, options: .allowFragments) as? [String: Any] { …
Run Code Online (Sandbox Code Playgroud)

swift

6
推荐指数
2
解决办法
9968
查看次数

将函数作为 prop 传递时是否应该始终使用 useCallback?

我有下面的代码。如果我传递 propsonUpdateonDelete函数(javascript 中的函数对象),则由于探查器中的 props 更改,子组件总是会重新渲染。该功能被重新创建,并且onUpdate现在onDelete是新的道具,对我来说很有意义。

但是,如果我添加useCallback,他们不会感知到道具变化,因为这是 的目的useCallback。所以这引出了几个问题。

  • useCallback使用传递给子函数的每个函数有什么缺点?
  • 使用是否没有任何好处useCallback,因为子级将渲染,因为父级无论如何都会渲染?
  • 为什么这不是默认行为?我知道这可能无法回答。

      <UpdateGroupInput
        onUpdate={useCallback(
          group => {
            const index = groups.findIndex(searchedGroup => searchedGroup.id === group.id);
            const newGroups = groups.slice();
            newGroups[index] = group;
            onChange(items, newGroups);
            hideAddItemModal();
          },
          [groups, items, onChange]
        )}
        onDelete={useCallback(
          id => {
            const newGroups = groups.filter(group => group.id !== id);
            const newItems = items.filter(item => item.group !== id);
            onChange(newItems, newGroups);
          },
          [groups, items, onChange]
        )} …
    Run Code Online (Sandbox Code Playgroud)

javascript reactjs

6
推荐指数
1
解决办法
2484
查看次数