undefined 不是 object (this.props.navigation.getParam)

Question

FoodCreate.js 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 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;

Hey everyone, I'm building a Diet App, the food gets created in FoodCreate.js by typing a food and pressing the checkmark Icon, and this will create the food and display it in the FoodList.js, keep it in mind that the first Screen to be displayed is FoodList.js.大家好，我正在构建一个饮食应用程序，通过键入食物并按下复选标记图标在 FoodCreate.js 中创建食物，这将创建食物并将其显示在 FoodList.js 中，请记住要显示的第一个屏幕是 FoodList.js。 When I run the code I get the following error: undefined is not an object (this.props.navigation.getParam)当我运行代码时，出现以下错误： undefined is not an object (this.props.navigation.getParam)

Answer 1

try尝试

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

you must see document here: https://reactnavigation.org/docs/params/您必须在此处查看文档： https://reactnavigation.org/docs/params/

undefined 不是 object (this.props.navigation.getParam)

问题描述

1 个解决方案

解决方案1
0 2021-04-15 15:57:39

undefined 不是 object (this.props.navigation.getParam)

问题描述

1 个解决方案

解决方案1 0 2021-04-15 15:57:39

解决方案1
0 2021-04-15 15:57:39