子组件向父组件传递数据时丢失部分数据问题求助

问题根源 #

React的useState状态更新是异步的，你在调用setFiles((prevState) => [...prevState, file])后立刻执行props.getFieDetails(files)，此时files还是更新前的旧状态值，所以父组件接收到的数组会少掉刚添加的这条文件数据。

两种解决方法 #

方法一：直接传递包含新文件的数组

既然已经拿到了新的file，可以直接构建最新的数组传给父组件：

const uploadHandler = (event) => {     
    const file = event.target.files[0];      
    console.log(file);     
    if(!file) return;      
     
    file.isUploading = true;
    const newFiles = [...files, file];
    setFiles(newFiles);
    props.getFieDetails(newFiles);
}

方法二：利用setFiles的回调获取最新状态

setFiles支持传入回调函数，回调里的prevState是更新后的最新状态，在这里调用父组件方法能确保传递的是最新数组：

const uploadHandler = (event) => {     
    const file = event.target.files[0];      
    console.log(file);     
    if(!file) return;      
     
    file.isUploading = true;
    setFiles((prevState) => {
        const newFiles = [...prevState, file];
        props.getFieDetails(newFiles);
        return newFiles;
    });
}

另外注意你的代码里有两处小问题：一是uploadHandler函数末尾多了一个多余的)，需要修正语法错误；二是父子组件间传递的方法名拼写getFieDetails（疑似应为getFileDetails），需保证拼写一致避免调用失败。

内容的提问来源于stack exchange，提问作者Shanu k k