React同一对象多useState调用异常：状态无法正确合并传递

核心问题 #

你的Clickable组件通过type Prop渲染不同UI元素，但每次使用<Clickable type="path" />、<Clickable type="channel" />、<Clickable type="upload" />时，每个都是独立的组件实例，各自维护自己的state对象。这导致选择目录时，只有path类型的实例更新了自身的dir值，channel类型实例的channel仍为空；选择频道时同理，不同实例的状态完全不互通，最终点击上传按钮时，upload类型实例的state还是初始空值。

此问题和useState的异步特性无关，本质是组件拆分导致的状态隔离。

修复方案 #

方案1：整合UI到同一个组件（最简方案） #

将所有UI元素放在同一个组件内，状态自然共享，无需拆分多个实例。

修改后的完整代码：

import { useState, useEffect } from "react"

export default function SlackUploader() {
    const [options, setOptions] = useState([]);
    const [state, setState] = useState({
        dir: '',
        channel: ''
    })
   
    useEffect(() => {
        fetchData();
    }, []);

    const fetchData = async () => {
        const response = await fetch("http://localhost:3000/api/getChannels");
        const data = await response.json();
        setOptions(data);
    }

    const handleFolderChange = (e) => {
        const folderPath = e.target.files[0].webkitRelativePath;
        const folderDir = folderPath.split('/');
        setState((prevState) => ({ ...prevState, dir: folderDir[0] }));
    }

    const handleChannelChange = (e) => {
        const channel = e.target.value;
        setState((prevState) => ({ ...prevState, channel }));
    };

    const handleFileUpload = async () => {
        try {
            if (state.dir && state.channel) {
                const response = await fetch("http://localhost:3000/api/uploadFiles", {
                    method: "POST",
                    headers: {
                        "content-type": "application/json",
                    },
                    body: JSON.stringify(state),
                });

                if (response.ok) {
                    console.log("上传成功!");
                    console.log(await response.text());
                } else {
                    console.log("上传失败!");
                }
            } else {
                console.log("请同时选择文件夹和频道。");
            }
        } catch (error) {
            console.log("上传文件出错:", error);
        }
    };

    return (
        <div>
            <input
                type="file"
                id="dir"
                webkitdirectory="true"
                directory=""
                onChange={handleFolderChange}
            />
            <select
                name="channels"
                id="channels"
                onChange={handleChannelChange}
                value={state.channel}
            >
                <option value="" disabled>选择频道</option>
                {options.map((option) => (
                    <option key={option[0]} value={option[0]}>
                        {option[1]}
                    </option>
                ))}
            </select>
            <button onClick={handleFileUpload}>上传</button>
        </div>
    )
}

方案2：状态提升到父组件（需拆分组件场景） #

若需保留组件拆分结构，可将状态提升至父组件，通过Props传递状态和更新函数给子组件：

父组件 SlackUploader.jsx

import { useState, useEffect } from "react"
import FolderSelector from "./FolderSelector"
import ChannelSelector from "./ChannelSelector"
import UploadButton from "./UploadButton"

export default function SlackUploader() {
    const [options, setOptions] = useState([]);
    const [dir, setDir] = useState('');
    const [channel, setChannel] = useState('')
   
    useEffect(() => {
        fetchData();
    }, []);

    const fetchData = async () => {
        const response = await fetch("http://localhost:3000/api/getChannels");
        const data = await response.json();
        setOptions(data);
    }

    const handleFileUpload = async () => {
        try {
            if (dir && channel) {
                const response = await fetch("http://localhost:3000/api/uploadFiles", {
                    method: "POST",
                    headers: {
                        "content-type": "application/json",
                    },
                    body: JSON.stringify({ channel, dir }),
                });

                if (response.ok) {
                    console.log("上传成功!");
                    console.log(await response.text());
                } else {
                    console.log("上传失败!");
                }
            } else {
                console.log("请同时选择文件夹和频道。");
            }
        } catch (error) {
            console.log("上传文件出错:", error);
        }
    };

    return (
        <div>
            <FolderSelector onFolderSelect={setDir} />
            <ChannelSelector 
                options={options} 
                onChannelSelect={setChannel} 
                selectedChannel={channel} 
            />
            <UploadButton onUpload={handleFileUpload} />
        </div>
    )
}

子组件 FolderSelector.jsx

export default function FolderSelector({ onFolderSelect }) {
    const handleFolderChange = (e) => {
        const folderPath = e.target.files[0].webkitRelativePath;
        const folderDir = folderPath.split('/');
        onFolderSelect(folderDir[0]);
    }

    return (
        <input
            type="file"
            id="dir"
            webkitdirectory="true"
            directory=""
            onChange={handleFolderChange}
        />
    )
}

子组件 ChannelSelector.jsx

export default function ChannelSelector({ options, onChannelSelect, selectedChannel }) {
    const handleChannelChange = (e) => {
        onChannelSelect(e.target.value);
    };

    return (
        <select
            name="channels"
            id="channels"
            onChange={handleChannelChange}
            value={selectedChannel}
        >
            <option value="" disabled>选择频道</option>
            {options.map((option) => (
                <option key={option[0]} value={option[0]}>
                    {option[1]}
                </option>
            ))}
        </select>
    )
}

子组件 UploadButton.jsx

export default function UploadButton({ onUpload }) {
    return (
        <button onClick={onUpload}>上传</button>
    )
}

额外优化建议 #

1. 移除不必要的e.preventDefault()：input和select的onChange事件无需阻止默认行为，多余代码可删除。
2. 给select添加value绑定：将其设为受控组件，确保UI与状态同步。
3. 可改用多个useState分别管理dir和channel：代码更清晰，useState的异步更新不会影响功能，只要使用函数式更新或在useEffect中监听状态变化即可。

内容的提问来源于stack exchange，提问作者Demi Daniel