时间戳

首页 > 解决方案 > 如何从传递给孩子的函数访问父母的当前状态

reactjs - 如何从传递给孩子的函数访问父母的当前状态

问题描述

目前正在处理一个嵌套了 FileUploader 组件的表单。

我希望用户删除 FileUploader 子组件中的文件，但还需要在 Form 父组件中可以访问文件（blob）数据。

我将状态和 removeFile 回调传递给子组件。我面临的问题removeFile()是从子组件调用时，它不引用当前文件。相反，挂载子组件之前文件的先前状态。

function Form() {
   const [files, setFiles] = useState([]);

   removeFile(key) {
      console.log(files);    // ISSUE: Returns previous state of files when the FileUpload is mounted.
      var updated_files = files.removeFileByKey(key);     
      setFiles(updated_files);       
   }

   return () {
     <div>
            // Other Form Inputs
            <FileUploader files={files} setFiles={setFiles} removeFile={props.removeFile}/>
     </div>
  }
}

function FileUploader() {
    onFileAdd(more_files) {
         props.setFiles(more_files);
    }

    return (
        props.files.map(file => {<File onClick={props.removeFile(file.key)} />)
    )
}

**如何从函数 prop 访问文件的当前引用？

谢谢

标签： reactjs

解决方案

解决此问题的一种方法是将文件存储在父组件和子组件中，并创建一个函数以在子子组件中同步。

function Form() {
   const [files, setFiles] = useState([]);

   return () {
     <div>
            // Other Form Inputs
            <FileUploader files={files} setFiles={setFiles} />
     </div>
  }
}

function FileUploader() {

    const [filesCopy, setFilesCopy] = useState([]);
    
    syncFiles() {
         props.setFiles(filesCopy);
    }    

    onFileAdd(more_files) {
         setFilesCopy(more_files);
         syncFiles();         
    }
    
    removeFiles(key) {
      console.log(filesCopy); // This will return current state of files
      var updated_files = files.removeFileByKey(key);     
      syncFiles();
    }

    return (
        filesCopy.map(file => {<File onClick={removeFile(file.key)} />)
    )
}

！！但是，此解决方案很糟糕，因为它需要两次存储文件。这会占用大量内存。

推荐阅读