无法读取未定义的属性“任务”

Question

我是 React Native 的初学者。我想根据登录的用户将数据从 login.js 传递到 home.js 。但是当我尝试使用下面的代码时，出现错误“进入 home.js 时无法读取未定义的属性“任务”。我已经检查了login.js中的console.log，它显示出来了，我不知道如何将它传递给home.js。

App.js

import React from 'react';
import 'react-native-gesture-handler';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/screens/Home';
import Login from './src/screens/Login';
import Register from './src/screens/Register';
import Splash from './src/screens/Splash';
import Account from './src/Account';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Icon2 from 'react-native-vector-icons/MaterialCommunityIcons';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const RootHome = () => {
  return (
    <Tab.Navigator
      initialRouteName="HomeTab"
      screenOptions={{
        tabBarActiveTintColor: '#42c983',
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#265c6f',
          height: 60,
        },
        tabBarLabelStyle: {
          fontFamily: 'UbuntuSans-Regular',
          fontSize: 14,
          marginBottom: 5,
        },
        tabBarHideOnKeyboard: true,
      }}>
      <Tab.Screen
        name="HomeTab"
        component={Home}
        options={{
          tabBarLabel: 'Task',
          tabBarInactiveTintColor: 'white',
          tabBarIcon: ({color}) => (
            <Icon name="tasks" color={color} size={20} />
          ),
        }}></Tab.Screen>

      <Tab.Screen
        name="AccountTab"
        component={Account}
        options={{
          tabBarLabel: 'Account',
          tabBarInactiveTintColor: 'white',
          tabBarIcon: ({color}) => (
            <Icon2 name="account" color={color} size={24} />
          ),
        }}></Tab.Screen>
    </Tab.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Home" component={RootHome} />
        <Stack.Screen name="Account" component={Account} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Login.js

const Login = () => {
  const navigation = useNavigation();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    axios
      .post('http://192.168.1.10:3000/users/login', {
        email,
        password,
      })
      .then(res => {
        console.log(res.data.metadata);
        console.log(res.data.tasks);
        navigation.navigate('Home', {tasks: res.data.tasks});
      })
      .catch(err => {
        console.log(err);
      });
  };

Home.js

const Home = ({route}) => {
  const tasks = route.params.tasks;
  console.log(tasks);

我希望 res.data.tasks 能够从 login.js 传递到 home.js。但它无法读取属性“任务”并显示“未定义”

Answer 1

如果登录屏幕的结构如图所示，为什么不将导航属性直接传递给登录组件，如下所示：

const Login = ({navigation}) => {
  // Login component code
};

然后，在handleLogin函数中，使用传递的导航道具，如下所示：

navigation.navigate('Home', {tasks: res.data.tasks});

这样，导航道具就来自父应用程序屏幕。如果这个方法对你有用，请给我点个赞。如果没有，您能否提供 console.log(JSON.stringify(route)) 的输出以获得进一步的帮助？