React/Next.js下拉框值无法修改问题求助

你的代码存在几个关键问题，导致下拉框值无法修改，以下是问题点和修复方案：

问题分析 #

• 下拉框的value绑定的是原始数据post?.cat_name而非状态变量content2，状态更新后视图无法同步
• onChange事件中直接传递事件对象给setContent2，没有获取到选中的实际值
• useEffect写在了组件外部，不符合React语法规范
• useEffect依赖数组为空，当post数据更新时无法同步状态到content2

修复后的完整代码 #

const Post = function(props) {
    const { post } = props;
    const [content2, setContent2] = useState('');

    useEffect(() => {
        if (post?.cat_name) {
            setContent2(post.cat_name);
        }
    }, [post?.cat_name]);

    return (
        <select 
            value={content2}
            className="form-control" 
            name="cat_name" 
            id="cat_name" 
            onChange={(e) => {
                setContent2(e.target.value);
            }}
        >
            <option value="">Select Category</option>
            <option value="pined">Pined</option>
        </select>
    );
};

关键修改说明 #

1. 将select的value绑定到状态变量content2，确保视图与状态双向同步
2. onChange事件中通过e.target.value获取下拉框选中的实际值，再更新状态
3. 将useEffect移至组件内部，并添加post?.cat_name作为依赖，保证初始值和post数据更新时状态能同步
4. 解构props中的post，提升代码可读性

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