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

【问题标题】：useState and initial value as array does not workuseState 和初始值作为数组不起作用
【发布时间】：2020-12-07 17:27:10
【问题描述】：

我正在尝试在我的项目中使用反应钩子，当我使用数组作为值时我遇到了 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 []
.........

提前致谢

【问题讨论】：

您是否确保所有项目都不属于您用于测试功能的区域？最后一个 console.log 也显示所有值或只是空数组 []？

标签： javascript reactjs react-hooks use-state

【解决方案1】：

我觉得你应该先把状态初始化为数组，然后再更新，如下：

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)

【讨论】：

这样做我得到了这个错误太多的重新渲染。 React 限制渲染次数以防止无限循环。
嗯，我觉得这个方案绝对等于OP码。所以，它不起作用！

【解决方案2】：

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

所以如果你想在每次更新时打印zoneItems的内容，就写这样的：

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

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

【讨论】：