useState和初始值作为数组不起作用

Question

我正试图在我的项目中使用react钩子，当我使用数组作为值时，useState出现了问题。

正如您在下面的代码中看到的，当我显示zoneItems时，它应该像items数组一样，我总是得到一个空数组。你能解释一下原因吗？

当我使用对象而不是数组时，它可以

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
const items = datas.items.filter(item => item.zoneId === zone.id)
console.log('========> items', items) // ---- SHOW the good values
const [zoneItems, updateItems] = useState(items)
console.log('========> zoneItems  ', zoneItems)   // ---- SHOW all the time []
.........

提前感谢

Answer 1

由于钩子的异步性质，可以在读取zoneItems的内容后执行分配useState(items)。但是react提供了一个钩子，它将在每次加载组件时触发，或者根据您的喜好，在每次zoneItems更改其值时触发：我说的是useEffect钩子。

因此，如果您想在每次更新时打印zoneItems内容，只需编写以下内容即可：

useEffect(() => {
console.log(zoneItems);
}, [zoneItems])

这是react提供的管理异步状态分配的方式。

Answer 2

我认为应该首先将状态初始化为数组，然后更新它，如下所示：

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
const items = datas.items.filter(item => item.zoneId === zone.id)
console.log('========> items', items)
const [zoneItems, updateItems] = useState([])

updateitems(items)
console.log('========> zoneItems  ', zoneItems)