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

问题描述

我正在尝试在项目中使用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 []
.........

预先感谢

解决方法

JavaScript是您的问题，因为它本质上是asynchronous。

例如：在下面的代码中，“ Hello World”和“ The End”都将打印在“ Async code”之前。同样，您的循环要花一些时间来执行状态初始化之前。

const networkRequest = () => {
  setTimeout(() => {
    console.log('Async Code');
  },2000);
};
console.log('Hello World');
networkRequest();
console.log('The End');

您可以执行以下操作以同步执行它。

function MyComponent({ bigJsonData }) {
  const [value,setValue] = useState(function getInitialState() {
    const object = JSON.parse(bigJsonData); // expensive operation
    return object.initialValue;
  });

  // ...
}

根据@Victor的评论进行更新，这是您的具体解决方案。

import React,{ useState } from "react";

const items = [{ id:0 },{ id:1 }]

export default function App() {
  const [value,setValue] = useState(function getInitialState() {
    return items.filter(item => item.id === 0)
  });
  return (
    <div className="App">
     {JSON.stringify(value)}
    </div>
  );
}

,

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

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

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

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

,

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

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)