Question

我在React Native项目中使用asyncStorage接收到的哈希数据是错误的。当我刷新页面时，它实际上有效。我的请求可能早于哈希运行。但是，我找不到解决方案。

 const [info, setInfo] = useState('');
 const [hash, setHash] = useState(null);

  const _retrieveData = async () => {
        try {
            const value = await AsyncStorage.getItem('hash');
           setHash(value)
        } catch (error) {
            // Error retrieving data
        }
    };

    useEffect(() => {
        _retrieveData()
        setTimeout(() => {
            console.log(hash) //
            axios.get(apiUrl + 'loginInfo?hash=' + hash)
                .then(response => {
                    setInfo(response.data.message);
                    console.log('res', response);
                });
        }, 1000);

    }, []);

Answer 1

_retriveData方法应位于useEffect内。

const [info, setInfo] = useState('');
const [hash, setHash] = useState(null);

useEffect(() => {

    const _retrieveData = async () => {
        try {
            const hash = await AsyncStorage.getItem('hash');
            return hash
        } catch (error) {
            console.log('error',error);
        // Error retrieving data
        }
    };

    const hash = _retrieveData()

    setTimeout(() => {
        console.log(hash) //
        axios.get(apiUrl + 'loginInfo?hash=' + hash)
            .then(response => {
                setInfo(response.data.message);
                console.log('res', response);
            });
    }, 1000);

}, []);

Answer 2

我通过向朋友寻求帮助解决了这个问题。

const [info, setInfo] = useState({});
const [hash, setHash] = useState(null);

const _retrieveData = useCallback(async () => {
    try {
        const value = await AsyncStorage.getItem('hash');
        setHash(value);
    } catch (error) {
        // Error retrieving data
    }
}, []);

const getInfo = useCallback(async () => {

    try {
        const response = await axios.get(apiUrl + 'loginInfo?hash=' + hash);
        setInfo(response.data.message)
    } catch (e) {
        console.log(e);
    }
}, [hash]); 

useEffect(() => {
    if (!hash) {
        _retrieveData();
    }
}, [hash]) 


useEffect(() => {
    if (hash) {
        setTimeout(() => {
            getInfo();
        },500)
    }
}, [hash, getInfo]);

react-native钩子useEffect中的哈希值null错误

2 个答案: