小编Kim*_*Kim的帖子

我是 Swift 的新手，来自 JS，我已经开始构建一个 iOS 应用程序。

最初，我使用 Promise Kit 来处理异步内容，因为它对我来说比我读到的其他内容更容易。

无论如何，在 JS 中，我经常使用以下模式：

async function doAyncFunction(item) {
  try {
    // do async call to fetch data using item
    return Promise.resolve(data);
  } catch (error) {
    return Promise.reject(error);
  }
}
const promises = items.map((item) => doAyncFunction(item));
const results = await Promise.all(promises);

我最终通过 Promise Kit 实现了这一点，如下所示：

func doManyAsyncRequests(userIds: [String], accessToken: String) -> Promise<Void> {
  Promise { seal in
    let promises = spotifyUserIds.map {
      doSingleAsyncRequest(userId: $0.id, accessToken: accessToken) // this function returns a promise …

我正在尝试为不同的屏幕尺寸更改 material-ui 按钮上的变体和/或大小。例如，在“sm”断点下方不使用变体或 size="small"，在“sm”上方使用变体="outlined"和/或 size="large"。

通常，我会使用 withStyles 并创建一个带有 theme.breakpoints 的样式，以通过使用 className 将样式应用于元素来影响更改，但是，variant 和 size 是道具。

在阅读了 api，搜索网络并广泛地摆弄之后，我似乎无法找出任何直接的方法来根据视口宽度更改道具。

我想过创建一个“宽度检测器”，然后使用一些 JS 逻辑来相应地更改按钮元素的道具，但这似乎离解决方案有点远。

所以我在这里询问是否有更简单的解决方案。谢谢。

我在输入上有一个 onChange 处理程序，我正在尝试根据我在 Dom 测试库文档中阅读的内容（此处和此处）来测试该处理程序。

我的代码中的一个区别是，我使用 props，而不是使用本地状态来控制输入值。所以 onChange 函数实际上是调用另一个函数（也通过 props 接收），它更新已“提升”到另一个组件的状态。最终，输入值作为 prop 被组件接收，并更新输入值。

我正在模拟 props 并尝试做一些简单的测试来证明 onChange 处理程序按预期工作。

我希望在更改处理程序中调用的函数被调用的次数与测试中使用 fireEvent.change 的次数相同，这适用于：

const { input } = setup();
fireEvent.change(input, { target: { value: "" } });
expect(handleInstantSearchInputChange).toHaveBeenCalledTimes(1);

我希望 input.value 是从原始模拟道具设置中读取的，这适用于：

  const { input } = setup();
  expect(input.value).toBe("bacon");

但是，我正在做一些愚蠢的事情（看起来根本不理解模拟函数），并且我无法弄清楚为什么以下块不更新 input.value，并继续从读取 input.value 设置原始的模拟道具设置。

由于期望“”/收到“培根”<=在原始道具中设置，因此失败

fireEvent.change(input, { target: { value: "" } });
expect(input.value).toBe("");

问题：如何编写测试来证明 input.value 已根据下面的代码更改？我假设我需要模拟handleInstantSearchInputChange函数来执行某些操作，但我还不知道我在这里做什么。

感谢您提供有关如何执行和/或更好地理解这一点的任何建议。

测试文件

import React from "react";
import InstantSearchForm …

我似乎总是遇到这个问题，而且我从来没有足够的能力来解决这个问题。

我将基于下面的代码块使用一个示例，该示例表示使用useState和useEffect的React功能组件。

设定

1. AWS S3存储桶中有一些mp3文件。这些文件已经过处理，因此文件名的格式为“ artist ||| title.mp3”。

2. 这些歌曲的元数据已存储在DyanamoDB表中，其分区键为“ artist”，排序键为“ title”。

3. 有一个函数getS3son​​gs，它以对象数组的形式异步获取所有歌曲的列表，并带有键“ key”，该键保存上面＃2的文件名。

4. 该功能forEach在文件列表上运行，并从每个文件中解析出“艺术家”和“标题”，然后执行单独的异步API调用，以通过API网关从DynamoDB表中获取每首歌曲的元数据。

5. 使用React useState挂钩在状态下创建一个数组“ songs”。

我要尝试做的 事情最终我要做的事情是使用useEffect钩子为步骤4中每首歌曲返回的元数据填充“歌曲”数组。

问题 以下代码块导致运行无限循环，因为[歌曲]被设置为useEffect挂钩的第二个参数。

我已经尝试了几种变体，但是我相信以下内容代表了我要解决的问题的症结所在。

注意这里的棘手部分不是“ s3Songs”的初始获取。可以将其作为单个对象直接放入状态。棘手的部分是，有多个对API的异步调用，以获取每个文件的元数据并将这些对象中的每个对象放入“歌曲”数组中。这就是我的头脑。

问题 此问题的最佳或推荐模式是什么？

import React, { useEffect, useState } from "react";
import Amplify, { API, Storage } from "aws-amplify";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);
const StackOverflowExample = () => {
  const [songs, setSongs] = useState([]);
  useEffect(() => {
    const getS3Songs = async () => {
      const s3Songs = await Storage.list("", { level: "public" }); …