尝试将属性传递到 react-native 中的第二个屏幕时出现错误“未定义不是 object（评估 'this.route'）”

Question

所以我试图在 react-native （带有博览会）中将一些属性传递到另一个屏幕并出现此错误：错误“未定义不是 object（评估'this.route'）”每次。我使用路由参数传递文本在道具标签“简”中指定。 我使用了其他变体，但总是出现同样的错误。

我的代码是

屏幕一：

export default function HomeScreen({ navigation }) {
  const [author, setAuthor] = useState([]);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Search Your Next Amazing Poem By Author, Or Keyword</Text>
      ...
       <TouchableOpacity style={styles.button} onPress={() => {navigation.navigate('PoemsAuthor'), {props: 'Jane'}}}>
          <Text style={styles.buttonTitle}>Search</Text>
        </TouchableOpacity>
      </View>
  );
}

屏幕 2：

import React, { useEffect, useState } from "react";
import { Text, View } from 'react-native';
import axios from 'axios';
import { useRoute } from '@react-navigation/native';


export default function PoemsAuthorScreen({ navigation, route }){
    const {props} = this.route.params;
    const {poetry, setPoetry} = setState("")
    
    useEffect(() => {
        const options = {
            method: 'GET',
            url: "https://thundercomb-poetry-db-v1.p.rapidapi.com/author/william shakespeare",
            headers: {
              'x-rapidapi-key': 'a0f62248edmsha80f5f690d48e62p1ac60djsnc0f5ecf310ba',
              'x-rapidapi-host': 'thundercomb-poetry-db-v1.p.rapidapi.com'
            }
          }; 
          
          axios.request(options).then(function (response) {
              setPoetry(response.data);
          }).catch(function (error) {
              console.error(error);
          });       
    })
              
        return (
            <View>
          {/*<Text> { poetry.map(element => 
                <Text> {element.author} {element.title} </Text>)}
          </Text>*/}
          <Text>{JSON.stringify(props)}</Text>
            </View>
             
            
        )}

我很感激任何帮助，因为我不知道发生了什么。 谢谢！

Answer 1

您的PoemsAuthorScreen是 function 组件，而不是 class。

要访问道具，您不需要this.

const {props} = route.params;