useState 和初始值作為數組不起作用

Question

我正在嘗試在我的項目中使用反應鈎子，當我使用數組作為值時，我遇到了 useState 問題。

正如您在下面的代碼中看到的那樣，當我顯示zoneItems時，它應該類似於items數組，但我始終得到一個空數組。 你能解釋一下為什么嗎？

當我使用 object 而不是數組時，它可以工作

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 提供的管理 state 異步賦值的方式。

Answer 2

我試圖在我的項目中使用反應鈎子，當我使用數組作為值時我遇到了 useState 問題。

正如您在下面的代碼中看到的那樣，當我顯示zoneItems它應該像items數組時，我總是得到一個空數組。 你能解釋一下為什么嗎？

當我使用 object 而不是數組時，它可以工作

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 3

我認為你應該首先將 state 初始化為一個數組然后更新它，如下所示：

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)