react setValues 挂钩无法正常工作

Question

我有一个要上传的文件数组，但我想将文件字符串数组更改为工作正常的对象数组。但是当我尝试将变量更新为新数组时，它仍然将旧数组保留在其位置。我的变量声明如下：

const initialState = {
name: '',
description: '',
price: '',
categoryList: [],
category: '',
subcategoriesList: [],
subcategories: [],
countInStock: '',
images: [],
brand: '',
buttonText: 'Add Product',
}
const [values, setValues] = useState(initialState)

现在，当用户上传一张或多张图像时，

images

具有文件上传位置的文件路径。按预期工作。现在，我尝试在将产品上传到数据库之前运行以下代码来允许使用“默认”图像：

let newArray = values.images.map((file) => ({
default: 0,
file: file,
}))
setValues({ ...values, images: newArray })

我认为用 newArray 设置值会首先替换图像中的值，但是当我在下一行上 console.log 值.images 时，我只在更改之前获取以前的图像（只是文件路径）到一个物体。我错过了什么或做得不正确吗？

console.log(values.images)

记录更改之前的先前图像。

Answer 1

这是改变任何状态的正确方法

let newArray = values.images.map((file) => ({
  default: 0,
  file: file,
}));

setValues((prevValues) => ({
  ...prevValues,
  images: newArray,
}));

// Now if you log values.images, it should contain the updated array.
console.log(values.images);