如何在 React 中使用 state 值动态地将新属性添加到文件 object

Question

I hope to be descriptive, Let's say I have a Files Object Array

JSONfiledata = [
    {
      lastModified:123444,
      name: 'file1',
      size: 0,
      type: ""    
    },
    {
      lastModified:123445,
      name: 'file2',
      size: 0,
      type: ""    
    },
    {
      lastModified:123446,
      name: 'file3',
      size: 0,
      type: ""    
    }
]

And I have a this component that receives that data through props

import React, {useState} from 'react'

const component = ({files}) => {

   const [inputValue, setInputValue] = useState('')

   const eventHandler = (e) => setInputValue(e.target.value)

   const addNewKey = files.map(fileObj => Object.defineProperty(fileObj, 'newKey', {
      value: inputValue
   }))

   return (
     {
       files.map(fileData => (<div>
          {fileData.name}
          <input value={inputValue} onChange={setInputValue} />
       </div>))
     }
   )
}

How can I mutate the current files object and add a 'newKey' on each one depending on the inputValue, but independently from each other.

I mean, at position 0 let's say I write on the input "this is the file number one" at position 1 "this is the file number two" and so on....

At the end, the expected output will be

[
    {
      lastModified:123444,
      name: 'file1',
      size: 0,
      type: "",
      newKey: "this is the file number one"    
    },
    {
      lastModified:123445,
      name: 'file2',
      size: 0,
      type: "",
      newKey: "this is the file number two"     
    },
    {
      lastModified:123446,
      name: 'file3',
      size: 0,
      type: "" ,
      newKey: "this is the file number three"    
    }
]

Answer 1

I build a solution: Build another component to manage every file individualy. Like this:

import React, { useState } from 'react';

import { Map } from './Map';

export const MapList = ({ files }) => {
  const [filesState, setFilesState] = useState([...files]);

  const handleChange = nObject => {
    /**You can compare with a unique id, preferably */
    setFilesState(filesState => filesState.map(file => (file.name === nObject.name ? nObject : file)));
  };
  return (
    <div>
      {filesState.map(file => (
        // If you have an ID you can send in this plance, to be more simple find the object in the handle function
        <Map handleChange={handleChange} file={file} />
      ))}
      <h2>Files Change</h2>
      {filesState.map(file => (
        <div>
          <p>
            {file.name} {file.newKey && file.newKey}
          </p>
        </div>
      ))}
    </div>
  );
};

In this wrapper component, you will update the entry array, with the handleChange function.

After you can build a component to manage your new key, for example:

import React, { useState } from 'react';

export const Map = ({ file, handleChange }) => {
  const [input, setInput] = useState('');

  const handleChangeKey = e => {
    const { name, value } = e.target;
    const nFile = { ...file, [name]: value };
    setInput(value);
    handleChange(nFile);
  };
  return (
    <div>
      <div>
        <label htmlFor={file.name}>
          <small>Input for: {file.name}</small>{' '}
        </label>
        <input id={file.name} name='newKey' value={input} onChange={handleChangeKey} type='text' />
      </div>
    </div>
  );
};

It works for me, i think is a solution maybe not the best, but is a simple solutions.

Answer 2

const JSONfiledata = [
    {
      lastModified:123444,
      name: 'file1',
      size: 0,
      type: ""    
    },
    {
      lastModified:123445,
      name: 'file2',
      size: 0,
      type: ""    
    },
    {
      lastModified:123446,
      name: 'file3',
      size: 0,
      type: ""    
    }
];

const fileNameToUpdate = 'file2';
const newKey = "file2Key";
const newArray = JSONfiledata.map((item) => {
    if (item.name === fileNameToUpdate) {
        return {...item, newKey: newKey };
    } else {
        return item;
    }
});

console.log(`newArray==`, newArray);