通过 getParam 将项目添加到 Flatlist答案

【问题标题】：Adding item to Flatlist by getParam通过 getParam 将项目添加到 Flatlist
【发布时间】：2021-04-30 03:20:28
【问题描述】：

饮食（主页）

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

      render() {

          return (

               <View style={{ flex: 1, top: hp("12%"), height: hp("100%") }}>
                <Button onPress={()=> this.props.navigation.navigate('FoodCreate')}>
                   <Text>Press to insert Food Name</Text>
                </Button>
                  <FlatList
                    data={{this.props.route?.params?.foodList}
                    keyExtractor={(item, index) => item.key.toString()}
                    renderItem={(data) => (
                      <ListItem itemDivider title={data.item.food} />
                    )}
                  />
                </View>

食物创造

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

  submitFood = (food) => {
    this.setState({
      foodList: [
        ...this.state.foodList,
        {
          key: Math.random(),
          name: food,
        },
      ],
    });
    this.props.navigation.navigate("Diet", {
      foodList: this.state.foodList,
    });
  };
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>

大家好，这个应用程序应该是这样工作的：当我启动 Expo 时，它会将我带到 Diet 屏幕，然后我从那里按 Button 将新食物添加到 Flatlist，一旦我发送到FoodCreate 屏幕我在TextInput 中输入食物的名称，当我单击标题中的复选标记时，它应该将我发送回Diet 并在Flatlist 中显示我输入的食物名称，等等。当我运行该应用程序时，它给了我以下错误：this.props.navigation.getParam is not a function

【问题讨论】：

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

【解决方案1】：

你必须使用

this.props.route.params.foodList

参数通过 route.params 属性传递，在 Navigation v5 中没有 getParams 选项

【讨论】：

感谢您的回答，现在它给了我错误：undefined is not an object (this.props.route.params.foodList)
哦，好的，所以饮食是第一个屏幕？在这种情况下，像 this.props.route?.params?.foodList 那样做一个空检查，所以它不会在第一次渲染时抛出错误
谢谢，现在错误不再显示了，但是当我输入食物并点击复选标记图标时，它会将我带到饮食屏幕，但列表上没有任何显示。
好的，您刚刚在更新后传递了状态，所以导航作为对 submitFood 中 setState 的回调 this.setState({//urchanges},()=>{//navigate from这里})
类似 this.setState({ foodList: [ ...this.state.foodList, { key: Math.random(), name: food, }, ], },()= >{ this.props.navigation.navigate("饮食", { foodList: this.state.foodList, });});