javascript - 字符串数组被转换为对象

问题描述

我正在使用预签名的 URL 将文件推送到亚马逊，并使用newData对象内的文件名引用修改文件数组。（文件数组位于称为项目的对象数组中）

// Add job
const addJob = async(data, user) => {
  const newData = { ...data };

  data.items.map((item, itemIndex) => {
    if (item.files !== []) {
      item.files.map(async(file, fileIndex) => {
        const uploadConfig = await axios.get(`/api/s3upload`, {
          params: {
            name: file.name,
          },
        });

        console.log(uploadConfig.data.key);

        newData.items[itemIndex].files[fileIndex] = uploadConfig.data.key;
        await axios.put(uploadConfig.data.url, file);
      });
    }
  });

  console.log(newData);

  try {
    const res = await axios.post('/api/jobs', newData);
    dispatch({
      type: ADD_JOB,
      payload: res.data,
    });
  } catch (error) {
    console.log(error);
  }
};

文件引用进来uploadConfig.data.key并被保存到newData对象中。

当这个函数被执行时，会发生一些奇怪的事情：

的控制台日志newData返回对文件的正确引用数组
文件上传得很好
对传递 newData 的 /api/jobs 的请求发送一个包含 { path: ... } 的对象数组

console.log(newData):

发帖请求：

标签： javascriptreactjsaxios

解决方案

JavaScript 这样做是因为forEach并且map不是承诺感知的。它不支持异步和等待。您不能使用awaitinforEach或map。

for循环是承诺感知的，因此用循环替换for循环并将它们标记为await返回预期的行为。

来源：zellwk 文章

更正（功能）代码：

  const addJob = async (data, user) => {
    const newData = { ...data };
    const { items } = data;

    const loop = async () => {
      for (let outer in items) {
        if (items[outer].files !== []) {
          const loop2 = async () => {
            for (let inner in items[outer].files) {
              const uploadConfig = await axios.get(`/api/s3upload`, {
                params: {
                  name: items[outer].files[inner].name,
                },
              });
              const res = await axios.put(uploadConfig.data.url, items[outer].files[inner])
              newData.items[outer].files[inner] = uploadConfig.data.key;
            }
          };

          await loop2();
        }
      }
    };

    await loop();
    try {
      const res = await axios.post('/api/jobs', newData);
      dispatch({
        type: ADD_JOB,
        payload: res.data,
      });
    } catch (error) {
      console.log(error);
    }
  };

javascript - 字符串数组被转换为对象

问题描述

解决方案

推荐阅读