反应组件不使用 onChange 事件发送变量值

Question

我正在尝试使用相同的反应组件和地图功能显示多个任务。组件应该上传文件并通过 onChange 事件显示已上传或正在上传的文件，稍后将添加 onSubmit 事件以将文件发送到后端。由于组件是使用 onChange 事件动态呈现的，因此我将 li 键作为参数发送，然后仅将文件名呈现给基于键匹配的 li。我目前遇到的问题是当我在 onChange 中发送密钥时，值没有到达函数。我什至尝试为键设置一个状态，然后将其拉入函数中，但我返回 undefined 我也尝试了 100 次其他事情，要么返回 undefined 要么返回 0。这是我在这里的第一篇文章，我也只是初级开发人员，所以我可能会在这里缺少所需的信息，如果是这样，请告诉我。

这里是代码

   const onChange = (e, index) => {
        setFilename(e.target.files[0].name)
        setArrFiles([...arrFiles, {key:index, file:e.target.files[0].name} ]) 
    }

    const displayTask = (index) => {
        let upload = []
        arrFiles.forEach(el => {
            if(el.key === index) {
                upload.push(el.file)
            }
        })
        return upload.map((file) => (
            <li key={index}>{file}</li>
        ))
    }

{database.map((task, index) => (
                <li key={index}>
                    <p>{index}</p>
                    <div className="userPortal__tasksContainer">
                        <div className='userPortal__tasksHeader'>
                            <p className='userPortal__tasksHeaderTitle'>{task.taskTitle}</p>
                            <p className='userPortal__tasksHeaderInfo'>{task.taskMessage}</p>
                        </div>
                        <div className='userPortal__tasksBodyButtons'>
                            <form className='userPortal__fileUpload'>
                                <input className='userPortal__inputButton' multiple id='file' type="file" onChange={e => onChange(e, index)}/>
                                <label htmlFor='file'>Choose File</label>
                            </form>
                            <button className='userPortal__tasksBodyButton green'>Task Complete</button>
                        </div>
                        <p id='userPortalFooterTitle'>Successfully Uploaded</p>
                        <div className='userPortal__footer'>
                            <ul>
                                {displayTask(index)}
                            </ul> 
                        </div>
                    </div>
                </li>
            ))}

Answer 1

这里的问题就像一个假人，我对输入 ID 进行了硬编码，因此在引用输入字段时，它只会获得硬编码的值而不是组件的索引。

这是更新后的表格。

                           <form className='userPortal__fileUpload'>
                               <input className='userPortal__inputButton' multiple id={index} type="file" onChange={(() => (e) => onChange(e, index))()}/>
                               <label htmlFor={index}>Choose File</label>
                           </form>

Answer 2

不要这样

const onChange = (e, index) => {
      setFilename(e.target.files[0].name);
      //  Okay You Need To Filter The State In Order To Get The Object With THe Current Index
      //  Set The File Value Of The Object To e.target.files[0].name
      setArrFiles((state) => {
        const allFiles = state;

        const currentFile = allFiles.filter(
          (file) => parseInt(file.key) === parseInt(index)
        )[0];
        // i converted it to an integer just to prevent further bugs
        currentFile.file = e.target.files[0].name;
        return [allFiles];
      });
    };