類型錯誤：無法讀取未定義的屬性（讀取“道具”）

Question

我正在使用本機反應制作一個 social.networking 應用程序。 用戶可以拍照，點擊保存按鈕導航到保存屏幕，圖像 uri 作為道具傳遞。 這是代碼-

應用程序.js

const store = createStore(rootReducer, applyMiddleware(thunk))

const Stack = createStackNavigator()

export default function App() {

    const [loading, setLoading] = useState(false)
    const [loggedIn, setLoggedIn] = useState(false)

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    return (
        <Provider store={store}>
            <NavigationContainer>
                <Stack.Navigator initialRouteName="HomeScreen">
                    <Stack.Screen
                        name="HomeScreen"
                        component={HomeScreen}
                        options={{headerShown: false}}
                    />
                    <Stack.Screen
                        name="CreatePostScreen"
                        component={CreatePostScreen}
                        options={{title: "New Post!"}}
                        navigation={this.props.navigation}   //error line
                    />
                    <Stack.Screen
                        name="SaveImageScreen"
                        component={SaveImageScreen}
                        options={{title: ""}}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </Provider>
    )
}

CreatePostScreen.js

function CreatePostScreen({navigation}) {

    const [hasCameraPermission, setHasCameraPermission] = useState(null)
    const [hasGalleryPermission, setHasGalleryPermission] = useState(null)
    const [type, setType] = useState(Camera.Constants.Type.back)
    const [camera, setCamera] = useState(null)
    const [image, setImage] = useState(null)

    useEffect(() => {
        ~~~~~~~~~~~~~~~
    }, [])

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    const takePicture = async () => {
        if (camera) {
            const data = await camera.takePictureAsync(null)
            setImage(data.uri)
        }
    }    

    return (
        <View style={{flex: 1}}>
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
                <IconButton
                    icon="radiobox-marked"
                    color={Colors.SEA_BLUE}
                    size={35}
                    onPress={() => takePicture()}
                />
                <IconButton
                    icon="check-circle"
                    color={Colors.SEA_BLUE}
                    size={35}
                    onPress={() => navigation.navigate("SaveImageScreen", {image})} //saved image uri is passed to another screen as prop   
                />
            </View>
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        </View>
    )
}

CreatePostScreen 和 SaveImageScreen 都是 App.js 中導航容器下的堆棧屏幕。

但是每當我運行該應用程序時，我都會收到此錯誤〜

TypeError: Cannot read properties of undefined (reading 'props')

或者，有時候這個錯誤~

TypeError: undefined is not an object (evaluating 'this.props') 

我應該對代碼進行哪些更改？

Answer 1

你為什么使用this.props ？ 這不是基於 class 的組件。
你正在使用函數式，你應該這樣寫： export default function App(props) {
並通過props.navigation訪問

Answer 2

消除

navigation={this.props.navigation}

      

Answer 3

你需要刪除這個

navigation={this.props.navigation}   //error line

this關鍵字用於基於類的組件，您的組件是一個功能組件，您不需要通過導航（我明白您要實現的目標）來瀏覽組件，您只需使用 react-navigation 中的鈎子，如下所示

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}