如何解决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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。