如何在列表中获取数组？使用 React.JS、Typescript答案

【问题标题】：How do I get array in the list? with React.JS, Typescript如何在列表中获取数组？使用 React.JS、Typescript
【发布时间】：2020-11-28 06:59:19
【问题描述】：

有一个对象作为

let list = [
  {
    id: '1',
];

调用这个函数后，结果应该是这样的；

result = [
  
  {
    id: '6',
  },
];

【问题讨论】：

source 和 destination 字符串是什么样的？到目前为止，您尝试过什么？

标签： javascript arrays reactjs typescript arraylist

【解决方案1】：

一步一步解释：

找到目标文件夹和源文件夹
复制源到目标文件夹
从源中过滤源文件夹

     let list = [
          {
        id: '1',
        name: 'Folder 1',
        files: [
          {id: '2', name: 'File 1'},
          {id: '3', name: 'File 2'},
          {id: '4', name: 'File 3'},
          {id: '5', name: 'File 4'},
        ]
      },
      {
        id: '6',
        name: 'Folder 2',
        files: [{id: '7', name: 'File 5'}],
      },
    ];
    
    function move (list: any[], sourceFileId: string, destinationFolderId: string): any[] {
      let listIndexThatContainsTheSource = -1;
      let listIndexOfDestination = list.findIndex((elem) => elem.id === destinationFolderId); //finding the destination folder index
      list.forEach((elem, index) => {
        if(elem.files.find((file) => file.id === sourceFileId)) {
          listIndexThatContainsTheSource = index;
        }
      });
      if(listIndexThatContainsTheSource > -1 && listIndexOfDestination > -1) { //source & destination exists
        const file = list[listIndexThatContainsTheSource].files.find((file) => file.id === sourceFileId); //find the source file
        list[listIndexOfDestination].files.push(file); //push source file into destination folder
        list[listIndexThatContainsTheSource].files = list[listIndexThatContainsTheSource].files.filter((file) => file.id !== sourceFileId); //filter the source file
      }
      else {
        return list; //cant find the source return original array 
      } 
    }
    
    move(list, '4', '6');

【讨论】：

【解决方案2】：

首先，您需要一些健壮的类型：

interface Folder {
    id: string
    name: string
    files: FileItem[]
}

interface FileItem {
    id: string
    name: string
}

现在我们可以在这里使用文件夹数组作为类型来代替List：

let list: Folder[] = [...]

为了让参数更清晰，让我们将它们重命名为更清晰的东西：

function move(
  list: Folder[],
  fileId: string,
  destinationFolderId: string
): Folder[] {
  //...
}

现在很清楚第二个参数是文件的ID，第三个参数是文件夹的ID。

然后找到文件，将其从文件夹中删除，然后将其添加到新文件夹中，这是一件非常简单的事情：

function move(list: Folder[], fileId: string, destinationFolderId: string): Folder[] {
    // Variable to store the found file, once it is found.
    let file: FileItem | undefined

    // Loop through each folder looking a file with the right ID
    for (const folder of list) {

        // Look for the correct file in this folder.
        file = folder.files.find(file => file.id === fileId)

        // If a file was found in this folder...
        if (file) {
            // Remove it from this folder
            folder.files = folder.files.filter(otherFile => otherFile.id !== fileId)

            // Stop looping, there is nothing else to do.
            break
        }
    }

    // Find the destination folder by its ID.
    const destinationFolder = list.find(folder => folder.id === destinationFolderId)
    
    // If file was found, and a desination folder was found...
    if (file && destinationFolder) {

        // Add the file to the new destination folder.
        destinationFolder.files.push(file)
    }

    // Return the updated folder list
    return list
}

Playground

请注意，此函数变异 list 作为副作用。这可能是您想要的，也可能不是。如果您希望在不更改传入的对象的情况下返回新对象，则需要查看immutable strategies。

【讨论】：