为什么传播下一个对象是清空仅存在于第一个对象中的数组属性字段？

Question

const initialState = {
  title: '',
  description: '',
  price: '',
  categories: [],
  category: '',
  subCategoriesList: [],
  subs: [],
  shipping: '',
  quantity: '',
  images: [],
  colors: ['Black', 'Brown', 'Silver', 'White', 'Blue'],
  brands: ['Apple', 'Samsung', 'Microsoft', 'Lenovo', 'ASUS', 'Dell'],
  color: '',
  brand: '',
}

const ProductUpdate = () => {
  const [values, setValues] = useState(initialState)
  const user = useSelector((state) => state.user)
  const authToken = user?.token

  const router = useRouter()

  const {
    query: { slug },
  } = router

  useEffect(() => {
  // with this loadCategories function, values.categories array get filled
    loadCategories()
    if (!slug && !values.categories) {
      return
    }
  //as soon as loadProductInfo happens, values.categories array becomes empty
    loadProductInfo(slug)
  }, [slug])



  const loadCategories = async () => {
    const response = await getCategories()
    setValues({ ...values, categories: response.data })
  }

 
  // this function makes values.categories empty array
  const loadProductInfo = async (slug) => {
    const response = await getProductInfo(slug)
    console.log('Product info', response.data) 
  // response.data doesn't have fields named categories, but still it makes categories array 
   empty
    setValues({ ...values, ...response.data })
  }

  console.log('Categories see here', values.categories)

来自loadProductInfo的响应data不包含任何名为类别的字段。在LoadCategories（）完成并从响应中设置值之后，我看到类别数组字段被填充，但是在LoadProductInfo（）完成后，它再次使该类别阵列array Field空了，奇怪的是whects.data。有任何字段命名类别，那么为什么要制作值。类别数组字段再次为空？这里有什么与我不了解的声明有关的吗？

Answer 1

我建议您将固定器与oldvalues一起使用，也许您的两个API调用之间存在冲突...

setValues(oldValues => ({ ...oldValues, ...response.data }))