如何使用useState更新initialState中categories数组的取值

现有代码存在的问题 #

• 状态初始化错误：useState 传入参数时多套了一层数组，导致 data 初始值为数组而非你定义的状态对象，后续解构 title/desc 等属性会直接报错
• 状态更新语法错误：setData 的函数式更新写法混淆了数组和对象的操作逻辑，没有正确保留原有状态字段

完整修改后代码 #

import React, {useEffect, useState} from "react";
import {getCategories} from "../../../Functions/Categoy";

const initialState = {
    title:"",
    desc:"",
    colors:["Black", "Brown", "Silver", "White", "Blue"],
    categories:[] // 分类数据存储位置
}

const CreateProducts = () => {
    // 移除初始化时多余的数组包裹
    const [data, setData] = useState(initialState);

    const { title, desc, colors, categories } = data
  
    useEffect(() => {
        loadCategories();
    }, [])
  
    const loadCategories = () => {
        getCategories()
                .then((res) => {
                    // 函数式更新：展开原有状态所有字段，仅覆盖categories的值
                    setData(prev => ({
                      ...prev,
                      categories: res.data
                    }))
                })
    };

    return (
          <div>{JSON.stringify(categories)}</div>
)}

export default CreateProducts;

核心修改点说明 #

1. 修正状态初始化：将 useState([initialState]) 改为 useState(initialState)，和你定义的初始状态类型保持一致
2. 修正loadCategories内的状态更新逻辑：使用函数式更新拿到上一次的状态，通过对象展开运算符保留title、desc、colors等原有字段，仅把categories替换为接口返回的数据

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