NodeJS 如何修复此错误?错误类型错误:null不是对象(计算“userdata. user”)

bd1hkmkf  于 2023-01-08  发布在  Node.js
关注(0)|答案(1)|浏览(720)

如何修复项目中的此错误?错误类型为ERROR TypeError:null不是一个对象(evaluating 'userdata. user')我正在使用react原生博览会登录到我的应用程序并进入主页面后,它给我这个错误,有人可以帮助我修复这个错误吗?我今天发送8小时修复这个错误,但我不能修复它,有人可以帮助我吗?

import { StyleSheet, Text, View, StatusBar } from 'react-native'
import React, { useEffect, useState } from 'react'
import { containerFull } from '../../CommonCss/pagecss'
import { formHead } from '../../CommonCss/formcss'
import Bottomnavbar from '../../Components/Bottomnavbar'
import TopNavbar from '../../Components/TopNavbar'
import FollowersRandomPost from '../../Components/FollowersRandomPost'
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Location from 'expo-location';

const Mainpage = ({ navigation }) => {

    const [userdata, setUserdata] = React.useState(null)
    const [location, setLocation] = useState(null);
    const [errorMsg, setErrorMsg] = useState(null);
    const [city, setCity] = useState(null);
    const [data, setData] =  useState(null)
 
    useEffect(() => {
        AsyncStorage.getItem('user')
            .then(data => {
                // console.log('async userdata ', data)
                setUserdata(JSON.parse(data))
            })
            .catch(err => alert(err))
    }, [])

    console.log('userdata ', userdata)

  useEffect(() => {
        (async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                setErrorMsg('Permission to access location was denied');
            }

            let location = await Location.getCurrentPositionAsync({});
            setLocation(location);

            let city = await Location.reverseGeocodeAsync(location.coords);
            setCity(city[0].city);
        })();
    }, []);

    const sendCity = () => {
        setCity(city);
        fetch('http://192.168.1.52:3000/updateCity', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                city: city,
              username: userdata.user.username
            }),
        })
            .then((response) => response.json())
            .then((data) => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    };

    useEffect(() => {
        sendCity();
    }, [])

    return (
        <View style={styles.container}>
            <StatusBar />
            <TopNavbar navigation={navigation} page={"MainPage"} />
            <Bottomnavbar navigation={navigation} page={"MainPage"} />
            <FollowersRandomPost />
        </View>
    )
}

export default Mainpage

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'black',
        paddingVertical: 50,
    }
})

为什么城市的价值变成了空,而纽约的价值是正确的,如何修复空?

import { StyleSheet, Text, View, StatusBar } from 'react-native'
import React, { useEffect, useState } from 'react'
import { containerFull } from '../../CommonCss/pagecss'
import { formHead } from '../../CommonCss/formcss'
import Bottomnavbar from '../../Components/Bottomnavbar'
import TopNavbar from '../../Components/TopNavbar'
import FollowersRandomPost from '../../Components/FollowersRandomPost'
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Location from 'expo-location';

const Mainpage = ({ navigation }) => {
  const [userdata, setUserdata] = useState(null);
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [city, setCity] = useState(null);
  const [data, setData] =  useState(null);

  useEffect(() => {
    async function getUserData() {
      try {
        const userDataString = await AsyncStorage.getItem('user');
        const userData = JSON.parse(userDataString);
        setUserdata(userData);
      } catch (err) {
        alert(err);
      }
    }

    getUserData();
  }, []);

  useEffect(() => {
    async function getLocation() {
      try {
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          setErrorMsg('Permission to access location was denied');
        }

        let location = await Location.getCurrentPositionAsync({});
        setLocation(location);

        let city = await Location.reverseGeocodeAsync(location.coords);
        setCity(city[0].city);
      } catch (err) {
        console.error(err);
      }
    }

    getLocation();
  }, []);

  useEffect(() => {
    async function sendCity() {
      try {
        setCity(city);
        const response = await fetch('http://192.168.1.52:3000/updateCity', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            city: city,
            username: userdata.user.username
          }),
        });
        const data = await response.json();
        console.log('Success:', data);
      } catch (err) {
        console.error('Error:', err);
      }
    }

    if (userdata) {
      sendCity();
    }
  }, [userdata]);

console.log(city)
  return (
    <View style={styles.container}>
      <StatusBar />
      <TopNavbar navigation={navigation} page={"MainPage"} />
      <Bottomnavbar navigation={navigation} page={"MainPage"} />
    </View>
  );
}

export default Mainpage
toiithl6

toiithl61#

你需要等待AsyncStorage在使用新数据之前完成他的任务,如何使用顶级等待像:

useEffect(() => {
        await AsyncStorage.getItem('user')
            .then(data => {
                // console.log('async userdata ', data)
                setUserdata(JSON.parse(data))
            })
            .catch(err => alert(err))
    }, [])

    console.log('userdata ', userdata)

对于第二个问题,如果您在useEffect中设置了城市状态,并且具有用户数据依赖性,则当用户数据状态更改时,将触发函数,并且由于城市初始状态为null,并且您无法立即从getLocation或sendCity中获取新状态,而无需重新呈现组件,我认为您需要在运行函数之前再添加一个条件,但这可能会对useEffect产生一些副作用。

useEffect(() => { 
  async function sendCity() {
     try {
      const response = await fetch('http://192.168.1.52:3000/updateCity', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          city: city,
          username: userdata.user.username
        }),
      });
      const data = await response.json();
      console.log('Success:', data);
    } catch (err) {
      console.error('Error:', err);
    }
  }
  if (userdata && city) {
    sendCity();
  }
}, [userdata, city]);

相关问题