无法从异步存储中获取值 它向"加载"显示'name'值，但是相同的代码在类组件名称中工作'value'更改

Question

使用setItem方法后，'name'变量的值应该更改为textInput中输入的值，但是console.log(item)在第一次点击提交按钮后显示'loading'。这是useState中name变量的初始值。

一旦我再次输入提交按钮，名称变量的值将更改为在textInput中输入的值。

期望:当我第一次点击提交按钮时，item.name变量应该更改为textInput值

在类组件中使用相同的代码可以正常工作。

export default function App() {
const arr =[] 
const [text, setText] = useState()
const[item,setItem] = useState([
{name: 'loading'}
])
const storedata= async ()=> {
// setItem({name: text})
arr.push({name: text})
try {
await AsyncStorage.setItem('mykey',JSON.stringify(arr));
console.log(await AsyncStorage.getItem('mykey'))
} 
catch (error) {
console.log(error)
}
try{

setItem({item: JSON.parse(await AsyncStorage.getItem('mykey'))})

console.log('printing item',item)
}
catch(e){
console.log(e)
}

}
return (
<View style={styles.container}>
<TextInput onChangeText={(text) => setText(text)}
placeholder='type'
/>
<Button title='change'
onPress={storedata}
/>



</View>
);
}

输出:第一次点击按钮:打印项目[{"name":"loading"}]

按钮第二次点击:打印项目{"item":[{"name":"hi"}]}

class App extends React.Component{
arr=[]
id=0
state= {
text: '',
item:[
{name: 'loading'}
]
}
storedata = async () => {
this.arr.push({ name: this.state.text})

await AsyncStorage.setItem('mylist',JSON.stringify(this.arr));

this.setState({
item: JSON.parse(await AsyncStorage.getItem('mylist'))
})
console.log(item)
}

Answer 1

setState函数是一个异步函数。setState调用被批处理以提高应用程序的性能。因此，结果不会立即反映出来。这就是为什么，您将获得item变量的前一个值。

你可以在这里找到更多信息。