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

Question

There is an object as

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

and after this function is called, result should look like this;

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

Answer 1

Step by step explaining:

• find the destination folder & source folder
• copy source into destination folder
• filter the source folder from the source

     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');

Answer 2

First, you want some robust types:

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

interface FileItem {
    id: string
    name: string
}

Now instead of List we can use an array of folders as the type here:

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

And in order to make the arguments clearer, lets renamed them to something a little bit clearer:

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

Now it's very clear the second argument is the ID of a file, and the third argument is the ID of a folder.

Then it's a pretty simple matter to find the file, remove it from it's folder, then add it to the new folder:

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

---

Note that this function mutates list as a side effect. This may, or may not, be what you want. If you want a new object return without changing the one you pass in, you want to look at immutable strategies instead.