小编col*_*ars的帖子

我正在尝试将文件上传到我的 S3 存储桶，然后返回我的上传功能。问题是我在上传返回存储的数据之前返回了函数。

我试图使用async/awaitwith s3.upload，但我不相信这s3.upload是一个承诺，所以它什么也没做。

前任：

   for (const file of files) {
    const params = {
      Bucket: BUCKET_NAME,
      Key: file.name,
      Body: file.data
    };
    const stored = await s3.upload(params, (err, data) => {
      if (err) console.log("error", err, err.stack);
      return console.log(data);
    });
    console.log(stored);
   }
   console.log("leave loop")

我尝试使用 Async 实用程序模块，async.each并在此堆栈答案中async.eachSeries引用，如下所示：

  const saveFile = async file => {
    const params = {
      Bucket: BUCKET_NAME,
      Key: file.name,
      Body: file.data
    };
    s3.upload(params, (err, data) …

我想呈现与我的 redux 存储中的某些对象具有 1:1 关系的组件列表。

我目前的代码是：

  props.images.forEach(imageFile => {
    let objectURL = URL.createObjectURL(imageFile);

    const newStyles = { 
      left: `${leftPosition}%`,
      top: `${topPosition}%`
    }

    previewFloats.push(
      <div className="Preview" style={{...style, ...newStyles}} key={v4()}></div>
    )
  });

  return(
    previewFloats
  )

编辑：这里的例子（codesandbox.io/s/brave-mcnulty-0rrjz）

问题在于，随着列表的增长，渲染整个背景图像列表的性能会受到很大影响。

实现这一目标的更好方法是什么？

编辑：仍然不确定为什么 background-image src 会触发重新渲染，但建议使用<img>元素而不是按预期工作。

我尝试将 Puppeteer 与 Lambda 结合使用，但是，在无服务器部署中，由于超过 250mb 未捆绑包大小限制，Lambda 会出错。

因此，为了低于限制，我已切换到 Puppeteer 核心，该核心不包含铬。这需要引用可执行文件的路径来启动 chrome。（例如puppeteer.launch({executablePath: headlessChromiumPath})）；

但是，我不确定如何将无头 Chromium 加载到我的容器中，以便稍后引用它。

为了解决这个问题，我正在尝试以下几件事：

首先，我下载了一个二进制 headless chromium 并将其包含到我的 API 中。

文件结构：

-run-puppeteer.js    
-headless_shell.tar.gz

参考如下：

const browser = await puppeteer.launch({
    executablePath: "../headless_shell.tar.gz"
  });

但是，我无法导入或要求它，因此我的 lambda 无法识别它的存在，并且不会将其包含在我的部署包中。我的问题是如何正确地将无头文件包含到我的 API 中，以便我可以从这个 lambda 中引用它？

如果这不是一个选项 - 我发现我可以将二进制文件上传到 S3，然后在容器启动时下载它。任何关于从哪里开始解决这个问题的参考资料将不胜感激。

我正在尝试显示一个阿凡达图像网格。在过渡状态下，我希望出现图像的骨架表示。为此，我正在使用@material-ui/lab/Skeleton.

我遇到的问题是，因为我的图像使用 设置为在网格内自动缩放height: auto, width: 100%，并且图像下显示的内容的高度/长度各不相同，所以没有设置高度 val 可以传递给骨架组件.

如果您缩小沙箱屏幕的宽度，您可以看到由此导致的问题。网格项目的高度增加导致圆形骨架开始变形为椭圆形。

这里是否有解决方案可能会给我类似于图像的行为height: auto, width: 100%？

到目前为止，我所拥有的完整代码在下方和沙箱中：https : //codesandbox.io/s/skeleton-scaling-y00cd。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Skeleton from "@material-ui/lab/Skeleton";
import Typography from "@material-ui/core/Typography";
import clsx from "clsx";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    textAlign: "center",
    height: "100%",
    width: "100%"
  },
  title: {
    marginTop: theme.spacing(1)
  },
  avatarRoot: {
    // width: '100%',
    // …

我不太清楚引用或变量如何与 CloudFormation 一起工作。

目前我在 serverless.yml 中的 iAmRole 看起来像：

  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:DescribeTable
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
      # Restrict our IAM role permissions to
      # the specific table for the stage
      Resource:
        - "Fn::GetAtt": [ ReportsTable, Arn ]

ReportsTable 是在另一个文件中创建的表，如下所示：

Resources:
  ReportsTable:
    Type: AWS::DynamoDB::Table
    Properties:
    ...
    LocalSecondaryIndexes:
        - IndexName: typeId-accessToken-index
          KeySchema:
          - AttributeName: typeId
            KeyType: HASH
            ...etc

我知道 Fn::GetAtt 数组中的第二个值引用了一个属性名，但我不明白 Arn 来自哪里。它看起来像一个变量，但它没有在任何地方定义。

最终，我需要添加另一个引用我创建的本地二级索引的 Effect、Action、Resource 块，但我不知道从哪里开始。

编辑：看起来 Arn 来自 dynamoDB 表返回值（ …

https://codesandbox.io/s/material-demo-04y5b

重现步骤：

• 点击“确认”或“有代码吗？” 触发不同形式的条件渲染。
• 点击“确认码” TextField。

• 请注意，边框渲染不正确，导致标签与边框重叠。

• 为了获得正确的行为，请使用 Null 以外的值初始化 newUser，并查看边框是否已正确呈现以适应标签。

知道为什么会发生这种情况吗？

我正在尝试获取具有纬度/经度点的对象数组，并Marker为每个对象创建一个，然后将这些Marker对象传递到<MarkerClusterer>组件中。

通过直接复制这里的文档，我可以让它工作。然而，他们的方法与我需要的有点不同。

差异似乎在于点如何映射到组件。

工作代码：

<MarkerClusterer
      options={{imagePath:"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"}}
    >
      {
        (clusterer) => [
          {lat: -31.563910, lng: 147.154312},
          {lat: -33.718234, lng: 150.363181},
          {lat: -33.727111, lng: 150.371124},
          {lat: -33.848588, lng: 151.209834}
        ].map((location, i) => (
          <Marker
            key={i}
            position={location}
            clusterer={clusterer}
          />
        ))
      }
    </MarkerClusterer>

我的非工作代码：

const listings = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
  ];
  let testArray = …

是否可以使此沙箱（https://codesandbox.io/s/material-demo-w385h）中的 Material-UI 图标装饰仅在用户选择文本字段时可见？

代码：

<TextField
  className={classes.margin}
  id="input-with-icon-textfield"
  label="TextField"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    )
  }}
/>

我希望有一个使用 Material-UI 道具的干净解决方案。