undefined 不是对象（this.props.navigation.getParam）答案

【问题标题】：undefined is not an object (this.props.navigation.getParam)undefined 不是对象（this.props.navigation.getParam）
【发布时间】：2021-04-14 05:45:43
【问题描述】：

FoodCreate.js

export class FoodCreate extends Component {
  state = {
    food: null,
    foodList: [],
  };

  submitFood = (food) => {
    this.setState({
      foodList: [
        ...this.state.foodList,
        {
          key: Math.random(),
          name: food,
        },
      ],
    });
    this.props.navigation.navigate("FoodList", {
      foodList: this.state.foodList,
      deleteFood: this.deleteFood,
    });
  };

  deleteFood = (key) => {
    this.setState({
      foodList: [...this.state.foodList.filter((item) => item.key != key)],
    });
  };

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon
                name="arrow-back"
                onPress={() => this.props.navigation.goBack()}
                style={{ fontSize: 25, color: "red" }}
              />
            </Button>
          </Left>
          <Body>
            <Title>Add Food</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon
                name="checkmark"
                style={{ fontSize: 25, color: "red" }}
                onPress={() => {
                  this.submitFood(this.state.food);
                }}
              />
            </Button>
          </Right>
        </Header>
        <View style={{ alignItems: "center", top: hp("3%") }}>
          <TextInput
            placeholder="Food Name"
            placeholderTextColor="white"
            style={styles.inptFood}
            value={this.state.food}
            onChangeText={(food) => this.setState({ food })}
          />
        </View>
     </Container>
    );
  }
}

export default FoodCreate;

FoodList.js

export class FoodList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foodList: [],
    };
  }

  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate("FoodCreate")}>
           Press to insert food
      </Button>
      <FlatList
        data={this.props.navigation.getParam("foodList")} <-------
        keyExtractor={(item, index) => item.key.toString()}
        renderItem={(data) => <ListItem itemDivider title={data.item.name} />}
      />
    );
  }
}
export default FoodList;

大家好，我正在构建一个饮食应用程序，通过输入食物并按下复选标记图标在 FoodCreate.js 中创建食物，这将创建食物并将其显示在 FoodList.js 中，将其保存在请注意，要显示的第一个屏幕是 FoodList.js。当我运行代码时，出现以下错误：undefined is not an object (this.props.navigation.getParam)

【问题讨论】：

使用this.props你需要constructor(props)和super(props)
我添加了它，它仍然给我错误

标签： javascript reactjs react-native react-navigation react-native-flatlist

【解决方案1】：

试试

   <FlatList
        data={props.route.params.foodList} <-------
        ...
        ...
      />

您必须在此处查看文档：https://reactnavigation.org/docs/params/

【讨论】：