小编Nim*_*ima的帖子

我从 React/Redux 中的 reddit API 获取了一些图像，我考虑通过将它们的loading属性设置为lazy.

但我会在 DevTools 中收到此消息：

[干预] 图像延迟加载并用占位符替换。加载事件被推迟。请参阅 https://go.microsoft.com/fwlink/?linkid=2048113

我在网上找不到任何相关信息，所以我想在 Stackoverflow 上询问该消息的含义。

我正在使用react-hook-formwithyup进行表单验证，并希望某些字段是可选的（空）。

按照他们的文档，我正在使用nullable()，optional()但它仍在验证中：

export const updateAddressSchema = yup.object({
  address: yup
    .string()
    .nullable()
    .optional()
    .min(5, "Address must be more than 5 characters long")
    .max(255, "Address must be less than 255 characters long"),
  city: yup
    .string()
    .nullable()
    .optional()
    .max(32, "City name must be less than 32 characters long"),
  postal_code: yup
    .string()
    .nullable()
    .optional()
    .length(10, "Postal code must be 10 characters long"),
  phone: yup
    .string()
    .nullable()
    .optional()
    .min(10, "Phone number must be more than 10 characters …

我希望我的图像完全适合 CardMedia。然而，由于它们的高度和宽度不同，其中一些会被切割成这样：

此外，在调整大小时，一些图像也会被剪切：

这是 CardMedia 部分的代码：

   <Card
      raised
      sx={{
        maxWidth: 280,
        margin: "0 auto",
        padding: "0.1em",
      }}
    >
      <CardMedia
        component="img"
        height="250"
        image={product.img_urls[0]}
        alt={product.name}
        title={product.name}
        sx={{ padding: "1em 1em 0 1em" }}
      />
      // Other Content
    </Card>

总的来说，我想实现这样的目标，但所有卡片的高度和宽度都相同：

有什么方法可以解决这个问题，还是需要单独调整每个图像的大小？

在我的 Reactjs 应用程序中，我使用 stripe 的付款意图 API 来处理付款。我使用可嵌入的支付元素<PaymentElement />来@stripe/react-stripe-js呈现 UI，但问题是支付元素完全加载到 UI 中需要几秒钟的时间。

有什么方法可以访问其加载状态并在加载时显示加载微调器？

在我的反应应用程序中，我在一页上有两个地址表单，它们有两个保存地址函数，可将地址保存在数据库中。还有一个提交按钮，可以提交两个字段并导航到下一页（圆圈中的加号按钮将地址添加到已保存的地址列表中）：

我想要做的是验证表单字段，并且我已经通过调用挂钩的两个实例来做到这一点useForm()：

// useForm hook
  const {
    control: senderControl,
    handleSubmit: handleSenderSubmit,
    setValue: senderSetValue,
  } = useForm({
    defaultValues: {
      senderName: '',
      senderLastName: '',
      senderPostalCode: '',
      senderPhone: '',
      senderAddress: '',
    },
  });

  // useForm hook
  const {
    control: receiverControl,
    handleSubmit: handleReceiverSubmit,
    setValue: receiverSetValue,
  } = useForm({
    defaultValues: {
      receiverName: '',
      receiverLastName: '',
      receiverPhone: '',
      receiverPostalCode: '',
      receiverAddress: '',
    },
  });

然后，我将这两个钩子的 handleSubmit 方法分别添加到每个字段的加号按钮的onClick （onPress在 RN 中）。

这确实单独验证了表单，但是当我尝试使用“提交”按钮提交整个页面时，问题就出现了。

我仍然希望在按下常规“提交”按钮时能够验证这两个地址字段，但我不知道如何用一个实例验证这两个实例handleSubmit并获取return data两个字段的值。 …