反应本机导航数据无法读取未定义的属性“道具”？答案

【问题标题】：react native navigation data Cannot read property 'props' of undefined?反应本机导航数据无法读取未定义的属性“道具”？
【发布时间】：2021-07-13 20:22:13
【问题描述】：

this.props.navigation.navigate 在导航屏幕转换时传递一个值。

在将一个值从 exerciseType.js 传递给 exerciseList.js 时，我收到一个错误 Cannot read property 'props' of undefined?..

--exerciseType.js--

import React from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class ExerciseType extends React.Component {
  render() {
    return (
      <View>
        <Button
          title="chest"
          onPress={() => this.props.navigation.navigate(
            'add exercise',
            {
              type: 'chest',
            }
        )}
        />
        <Button
          title="back"
          onPress={() => this.props.navigation.navigate(
            'add exercise',
            {
              type: 'back',
            }
        )}
        />
        <Button
          title="leg"
          onPress={() => this.props.navigation.navigate(
            'add exercise',
            {
              type: 'leg',
            }
        )}
        />
        <Button
          title="full_body"
          onPress={() => this.props.navigation.navigate(
            'add exercise',
            {
              type: 'full_body',
            }
        )}
        />
      </View>
    )
  }
}

export default ExerciseType;

--exerciseList.js--
import React, {useState, useRef, useEffect} from 'react';
import {StyleSheet, Text, TextInput, View, Button, FlatList} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import database from '@react-native-firebase/database';
import firebase from '@react-native-firebase/app'




export default ExerciseList = () => {
  const getType = this.props.navigation.getParam('type');
  const [data, setData] = useState('');
  
  const renderItem = ({item}) => {
    return(
      <View>
        <Text>
          {item.exercise}
        </Text>
      </View>
    )
  }
 
  useEffect(()=>{
    let chageDataRef = firebase.database().ref('exercise');
    chageDataRef.on("value", (snapshot)=>{
      console.log(snapshot)

      const tmp = [];

      snapshot.forEach((child)=>{
        if(child.val().type == getType) {    
          tmp.push({
            key : child.key,
            exercise : child.val().name,
          })
        }
      })
    
      setData(tmp);
    })
  },[])
  
  return(
    <View>
      <FlatList data={data} renderItem={renderItem} />
    </View>

  )
}

无法读取未定义的属性“道具”？..

我认为是渲染的问题，我该如何修改executiveList.js？

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

您不能在功能组件中使用this 关键字。我还没有运行代码，但从我所看到的情况来看，请按照以下建议进行更改：

export default ExerciseList = (props) => { // ADD props ARGUMENT
const getType = props.navigation.getParam('type'); // AND REPLACE 'this.props' to 'props'
   ...
}

由于this 在功能组件中不可用，它将是未定义的，因此您上面提到的错误。

【讨论】：