Reactjs 反应本机状态不变_Reactjs_React Native_React Hooks_Asyncstorage

Reactjs 反应本机状态不变

reactjs react-native

Reactjs 反应本机状态不变,reactjs,react-native,react-hooks,asyncstorage,Reactjs,React Native,React Hooks,Asyncstorage,我想使用钩子将字符串从asyncstorage传递到状态变量，但它不起作用，尝试了几个小时，但仍然不起作用。代码如下： const [cartitems, cartitemsfunc] = useState(''); const d = async () => { let items = await AsyncStorage.getItem('items'); console.log('items from cart:' + items); cartitemsfunc(items);

我想使用钩子将字符串从

asyncstorage

传递到状态变量，但它不起作用，尝试了几个小时，但仍然不起作用。代码如下：

const [cartitems, cartitemsfunc] = useState('');

const d = async () => {
let items = await AsyncStorage.getItem('items');
console.log('items from cart:' + items);
cartitemsfunc(items);
console.log('items from cart2:' + cartitems);
 };

d();

当我尝试在控制台中记录

cartitems

时，它会在控制台中记录一个空字符串，但

items

会注销该字符串

谁能告诉我哪里出了问题

提前感谢

由于

setState

是异步的，因此您需要在它完成时观察，使用

useffect

并将

caritems

添加到dependencies数组中可以很容易地做到这一点

const [cartitems, cartitemsfunc] = useState('');

const d = async () => {
  let items = await AsyncStorage.getItem('items');
  console.log('items from cart:' + items);
  cartitemsfunc(items);
};

useEffect(()=> {
 console.log('items from cart2:' + cartitems);
}, [caritems]);

d();

由于

setState

是异步的，您需要在它完成时进行观察，因此可以使用

useffect

并将

caritems

添加到依赖项数组中来轻松完成

const [cartitems, cartitemsfunc] = useState('');

const d = async () => {
  let items = await AsyncStorage.getItem('items');
  console.log('items from cart:' + items);
  cartitemsfunc(items);
};

useEffect(()=> {
 console.log('items from cart2:' + cartitems);
}, [caritems]);

d();

我认为这里console.log（）语句是在更新状态之前执行的。因为这里使用了wait，所以它将在得到结果之前执行下一行

因此，在这种情况下，我们使用useffect（）和useState（）的组合。useEffect（）用于获取数据，useState（）用于更新状态并重新呈现UI。

我认为在更新状态之前执行console.log（）语句。因为这里使用了wait，所以它将在得到结果之前执行下一行

因此，在这种情况下，我们使用useffect（）和useState（）的组合。useEffect（）用于获取数据，useState（）用于更新状态并重新呈现UI。

如注释中所述和提供的，

useState

是异步的，因此设置一个值并立即在下一行中读取它将不会产生一致的结果：

cartitemsfunc(items); // async call
console.log('items from cart2:' + cartitems); // cartitems not updated yet

还必须了解，无论何时使用

useState

更新状态，组件都将再次渲染。如果你在应用程序的主体中有一个方法调用，它将在你每次更新状态时运行。因此，您有一个场景，在这个场景中，您正在调用updatestate，但是该方法正在执行，并且最终覆盖了您的更改

const d = async () => {
let items = await AsyncStorage.getItem('items');
console.log('items from cart:' + items);
cartitemsfunc(items);
console.log('items from cart2:' + cartitems);
 };

d(); // this will run every time the component renders - after you update state

如果仅在初始渲染时需要该值，则从

useffect

调用该方法，并将依赖项链设置为

[]

，以便它在第一次渲染时仅运行一次，而不是每次更新状态时都运行一次

下面的示例演示如何从localStorage获取/设置值，以及如何直接更新状态

import React，{useState，useffect}来自“React”；
从“@react native community/async storage”导入异步存储；
导入“/styles.css”；
导出默认函数App（）{
常量[cartItems，setCartItems]=useState（null）；
const setLSItems=async（）=>{
等待AsyncStorage.setItem(
“项目”，
stringify（[{id:“foo”，数量：1}，{id:“bar”，数量：2}]））
);
getLSItems（）；//或setCartItems（“Foo”）；
};
常量clearLSItems=async（）=>{
等待AsyncStorage.removeItem（“项目”）；
getLSItems（）；//或setCartItems（null）；
};
const getLSItems=async（）=>{
const items=wait AsyncStorage.getItem（“items”）；
setCartItems（JSON.parse（items））；
};
//使用本地存储进行旁路
const setCartItems直接=（）=>{
setCartItems（[{id:“baz”，数量：3}]）；
};
useffect（（）=>{
getLSItems（）；
}，[]）；//开始时运行一次
返回(
设置LS项目
清除LS项目
直接设置购物车项目

{cartItems&&
cartItems.map（（项目，索引）=>(
项目：{item.id}数量：{item.quantity}
))}
);
}