为什么 map() 函数不能创建一个新数组？

Question

我使用 react-native 和 graphQL。

selectPhoto 是一个包含两个字符串的数组。

Array [
  "file:///storage/emulated/0/DCIM/Camera/20220223_150530.jpg",
  "file:///storage/emulated/0/DCIM/Camera/20220223_150453.jpg",
]

我用map用这个array创建新数组。

  const onValid = async ({ caption }) => {
    const file = selectPhoto.map((sp, index) => {
      console.log(sp, index);
      new ReactNativeFile({
        uri: sp,
        name: `${index}.jpg`,
        type: "image/jpeg",
      });
    });
    console.log(file);
  };

当i console.log(sp, index) 在这里，每个字符串和索引都被正确记录。

但是当我做这个 file 然后 console.log 它，

我希望像下面这样。

Array [
  ReactNativeFile {
    "name": "0.jpg",
    "type": "image/jpeg",
    "uri": "file:///storage/emulated/0/DCIM/Screenshots/Screenshot_20220223-011625_KakaoTalk.jpg",
  },
  ReactNativeFile {
    "name": "1.jpg",
    "type": "image/jpeg",
    "uri": "file:///storage/emulated/0/DCIM/Camera/20220222_161411.jpg",
  },
]

不过，这个undefined的数组来了

Array [
  undefined,
  undefined,
]

即使我尝试使用 Promise.all，如下所示。但还是和undefined.

一样

  const onValid = async ({ caption }) => {
    const file = Promise.all(
      selectPhoto.map((sp, index) => {
        console.log(sp, index);
        new ReactNativeFile({
          uri: sp,
          name: `${index}.jpg`,
          type: "image/jpeg",
        });
      })
    );

你能知道这里的问题是什么吗？

Answer 1

Why map() function can't make a new Array?

它确实创建了一个新数组，但它用 undefined 填充它。

你需要一个return。 javascript 中没有 return 的函数将 return undefined.

selectPhoto.map((sp, index) => {
  console.log(sp, index);

  //here you need to return the ReactNativeFile you just created:
  return new ReactNativeFile({
    uri: sp,
    name: `${index}.jpg`,
    type: "image/jpeg",
  });
});

如果您不启动代码块（没有 {}），那么它可以在没有 return 关键字的情况下工作：

selectPhoto.map((sp, index) => new ReactNativeFile({
    uri: sp,
    name: `${index}.jpg`,
    type: "image/jpeg",
  })
);

为什么 map() 函数不能创建一个新数组？

Why map() function can't make a new Array?

gql

amazon-web-services

react-native