Question

我在useState中使用react功能组件。我正在尝试更新对象中的数组，但未更新。以下是我的状态

const [prodImg, setProdImg] = useState({
    show : false,
    url : '',
    title : '',
    imgList : []
})

我想通过一个函数来更新imgList，该函数接收如下对象的数组。

const setImage = ({ fileList }) => {
    setProdImg(
        {
            ...prodImg,
            imgList: fileList
        },
        console.log(prodImg.imgList)
    )
}

此处fileList是对象的结构化数组。但是prodImg.imgList不会更新 fileList包含这样的结构：

[
   {
       name : 'asc.jpg',
   },
   {
       name : 'aqwe.jpg',
   }
]

Answer 1

5月update state asynchronously起反应。在您的代码中，您只需将当前状态的控制台imgList写入控制台，该状态保存在堆栈中，但是实际上在之后将状态写入控制台后会对其进行更新。尝试在effect挂钩中记录状态：

  const [prodImg, setProdImg] = useState({
    show : false,
    url : '',
    title : '',
    imgList : []
  }) 

  // this callback will be invoked on the component update, eg when state is changed.
  useEffect(() => {
    console.log(prodImg.imgList)
  });

ReactJs useState设置对象数组

1 个答案: