如何实现依赖自定义hook状态的本地state联动且可独立修改？

你需要通过useEffect监听外部状态selectedCountry的变化，在它更新时同步到本地的country状态，同时让Select组件绑定本地状态，这样既能实现外部变化时的自动同步，又支持用户独立修改本地值。

修改后的完整代码 #

import { useEffect, useState } from 'react';
import { Box, Select, MenuItem } from '@mui/material';

const Example = (props) => {
    // 修正解构赋值的语法错误，添加const
    const { selectedCountry, setSelectedCountry } = useSelectedCountry(); 
    // 初始值设为selectedCountry，确保组件挂载时同步初始值
    const [country, setCountry] = useState(selectedCountry);
    const countryList = props.countryList;

    // 监听selectedCountry的变化，同步到本地state
    useEffect(() => {
        setCountry(selectedCountry);
    }, [selectedCountry]); // 依赖项为selectedCountry，仅当它变化时触发

    return(
        <Box>
            <label htmlFor='country'>Country</label>
            <Select 
                sx={{ m: 1, width: inputSelectWidth, mt: 3, height: 35, ml: 12 }}
                value={country}
                onChange={(e) => { setCountry(e.target.value); } }
            >
                {
                    countryList.map(countryItem => { // 重命名变量避免和state冲突
                        return (
                            <MenuItem 
                                value={countryItem.countryName}
                                key={countryItem.countryID}
                            >
                                {countryItem.countryName}
                            </MenuItem>
                        );
                    })
                }
            </Select>
        </Box>
    );
}

export default Example;

关键逻辑说明 #

• 初始同步：组件挂载时，本地country的初始值直接设为selectedCountry，确保初始状态一致。
• 外部变化同步：useEffect会在selectedCountry发生变化时自动触发，调用setCountry更新本地状态，实现外部状态变化时的自动同步。
• 独立修改支持：Select组件绑定的是本地country状态和setCountry，用户手动选择其他选项时，只会修改本地状态，不会影响外部的selectedCountry；只有当外部的selectedCountry再次变化时，才会重新同步覆盖本地值。

另外修正了原代码中的两个小问题：

1. 解构useSelectedCountry返回值时缺少const关键字，会导致语法错误。
2. map循环中使用country作为迭代变量，和本地state变量重名，容易引发混淆，重命名为countryItem。

内容的提问来源于stack exchange，提问作者Mahmud Mridul