问题描述
我正在使用 useEffect 将来自 redux 的所有数据保存在一个状态中。
下面是我的代码:
const [items,setItems] = useState();
React.useEffect(() => {
setItems(createMenuReducer.data.product);
console.log("item",items);
},[items]);
<ScrollView>
{createMenuReducer &&
items?.map((item,index) => {
return (
<ItemComponent
item={item}
/>
);
})}
</ScrollView>
console.log 输出:
item undefined
但是当我再次单击保存时,所有项目都得到了安慰:
item (10) [{…},{…},{…}]
我尝试更新状态,认为它也会更新 UI,但这并没有发生。第一次加载时我得到一个空白页面,但是当我再次单击保存时,所有项目都显示在 UI 中。如何解决此问题,以便在应用加载时所有项目都在屏幕上?
解决方法
要知道状态更新受闭包的影响并且是异步的,因此在调用 setItems 后不会立即处理您的项目值,但它将在下一次渲染中可用。
另请注意,您必须在 createMenuReducer 数据更新时更新您的项目,因此将其添加为 useEffect 而不是项目的依赖项
const [items,setItems] = useState([]);
React.useEffect(() => {
setItems(createMenuReducer.data.product);
},[createMenuReducer?.data.product]);
console.log(items);
<ScrollView>
{items.map((item,index) => {
return (
<ItemComponent
item={item}
/>
);
})}
</ScrollView>
但是在大多数情况下,您不需要将 props 值复制到 state 中,而应该直接使用 props 中的数据
<ScrollView>
{createMenuReducer?.data?.product?.map((item,index) => {
return (
<ItemComponent
item={item}
/>
);
})}
</ScrollView>