React中添加新分类后如何更新Select组件的选项？

你当前的实现存在核心问题：直接修改从JSON文件导入的cat数组不会触发组件重新渲染。因为导入的JSON数据是静态资源，React无法监测到数组的push操作，所以Select组件的选项不会自动更新。

正确的做法是用React的useState来管理分类列表，状态更新时组件会自动重新渲染，Select的选项也会同步更新。以下是修改后的完整代码：

import React, { useState } from 'react';
import initialCats from '../Category.json'

function AddProducts() {
    // 用useState管理分类列表，初始值为导入的JSON数据
    const [categories, setCategories] = useState(initialCats);

    return (
        <div className='mx-auto w-50 border  p-4 rounded-4 mt-4 '>
            <form action="">
                <div className='mb-3 row align-self-center'>
                    <label htmlFor="price" className='form-label cols '>Category: </label>
                    <select id="" className="form-select col ms-2">
                        {/* 遍历state中的categories生成选项 */}
                        {categories.map((value, i) => <option key={i}>{value}</option>)}
                    </select>
                    <button type='button' className='btn btn-success col-auto text-center' onClick={() => {
                        let newCategory = prompt("Please enter your new Category");
                        if (newCategory) {
                            // 不直接修改原数组，创建新数组并更新state
                            setCategories([...categories, newCategory]);
                        }
                    }}>+</button>
                </div>
                <button type="submit" className='btn btn-primary'>Submit</button>
            </form>
        </div>
    );
}

export default AddProducts;

关键修改说明： #

• 用useState替代直接使用导入的JSON数组，将分类列表转为组件状态，让React能监测到数据变化。
• 更新分类时，通过setCategories创建新数组（使用扩展运算符[...categories, newCategory]），而非直接修改原数组。React要求状态更新必须遵循不可变原则，直接修改原数组不会触发重新渲染。
• 移除了不必要的useEffect，因为状态更新会自动触发组件重新渲染，无需额外监听。

另外注意：你代码中的组件名AddProdocts存在拼写错误，已修正为AddProducts。

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