如何从 react-native 中的异步函数中获取值?
How to get value from async function in react-native?
function CategoryCard (props) {
const [done, setDone] = React.useState(null);
let check;
React.useEffect(() => {
async function checkData() {
check = await getData(props.path);
// prints CORRECTLY
console.log(check);
}
checkData();
//prints INCORRECTLY
console.log(check);
setDone(true);
}, []);
return (
<View>
{done ? (
<Text>{check}</Text>
):(
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#99ff99" />
</View>
)}
</View>
);
}
在 react-native 中如何从异步函数获取值到我的常规函数中?
在上面的代码中,第一个 console.log 打印了期望值,但第二个给出了未定义的值,就好像异步函数从未对变量检查产生任何影响一样。
我需要 getData(props.path)
的检查值,以便在 <Text>
组件中显示它。
有什么想法吗?
放入状态
function CategoryCard (props) {
const [check, setCheck] = React.useState(null);
React.useEffect(() => {
async function checkData() {
const data = await getData(props.path);
setCheck(data);
}
checkData();
}, []);
return (
<View>
{check ? (
<Text>{check}</Text>
):(
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#99ff99" />
</View>
)}
</View>
);
}
function CategoryCard (props) {
const [done, setDone] = React.useState(null);
let check;
React.useEffect(() => {
async function checkData() {
check = await getData(props.path);
// prints CORRECTLY
console.log(check);
}
checkData();
//prints INCORRECTLY
console.log(check);
setDone(true);
}, []);
return (
<View>
{done ? (
<Text>{check}</Text>
):(
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#99ff99" />
</View>
)}
</View>
);
}
在 react-native 中如何从异步函数获取值到我的常规函数中?
在上面的代码中,第一个 console.log 打印了期望值,但第二个给出了未定义的值,就好像异步函数从未对变量检查产生任何影响一样。
我需要 getData(props.path)
的检查值,以便在 <Text>
组件中显示它。
有什么想法吗?
放入状态
function CategoryCard (props) {
const [check, setCheck] = React.useState(null);
React.useEffect(() => {
async function checkData() {
const data = await getData(props.path);
setCheck(data);
}
checkData();
}, []);
return (
<View>
{check ? (
<Text>{check}</Text>
):(
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#99ff99" />
</View>
)}
</View>
);
}