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

Question

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)

Answer 1

嘗試

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

您必須在此處查看文檔： 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