将项目添加到 Flatlist，React Native 时遇到问题答案

【问题标题】：Trouble on adding items to Flatlist, React Native将项目添加到 Flatlist，React Native 时遇到问题
【发布时间】：2021-07-25 12:15:41
【问题描述】：

饮食（屏幕）

export class Diet extends Component {
  constructor(props) {
    super(props);
this.state = {
foodList: [],
    };
  }
    render() {
      return (
           <View>
                  <List>
                    <FlatList
                      data={this.props.route?.params?.foodList}
                      keyExtractor={(item, index) => item.key.toString()}
                      renderItem={(data) => (
                        <ListItem>
                          <Button>
                            <Left>
                              <Text>{data.item.foodName}</Text>
                            </Left>
                            <Right>
                              <Text>{data.item.calories}</Text>
                              <Icon name="arrow-forward" />
                            </Right>
                          </Button>
                        </ListItem>
                      )}
                    />
                  </List>
                </View>

FOODCREATE（屏幕）

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

  submitFood = (food, calories) => {
    this.setState(
      {
        foodList: [
          ...this.state.foodList,
          {
            key: Math.random(),
            foodName: food,
            calories: calories,
          },
        ],
      },
      () => {
        this.props.navigation.navigate("Diet", {
          foodList: this.state.foodList,
        });
      }
    );
  };
render() {
    return (
      <Container>
         <TextInput
            placeholder="Food Name"
            placeholderTextColor="white"
            style={styles.inptFood}
            value={this.state.food}
            onChangeText={(food) => this.setState({ food })}
          />
         <TextInput
            placeholder="Calories"
            placeholderTextColor="white"
            style={styles.inptMacros}
            keyboardType="numeric"
            value={this.state.calories}
            maxLength={5}
            onChangeText={(calories) => this.setState({ calories })}
          />
          <Button transparent>
          <Icon
            name="checkmark"
            style={{ fontSize: 25, color: "red" }}
            onPress={() => {
              this.submitFood(this.state.food, this.state.calories);
            }}
          />
        </Button>

大家好，我正在尝试制作一个应用程序，其中用户必须在FoodCreate 屏幕中插入foodName 和calories，一旦他点击checkmark，它将添加foodName 和calories 到 Diet 屏幕中的 Flatlist（当我启动 Expo 时，出现的第一个屏幕是 Diet 屏幕）。当我插入第一个食物时，一切都很好，但是当我想插入另一个时，我之前插入的那个消失了，它只显示我刚刚插入的那个。我不知道这是否与 Flatlist 或 React Navigation 有关。但是 Flatlist 不会保留我插入的项目。

【问题讨论】：

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

【解决方案1】：

这里的问题是导航的工作方式，每次打开 FoodCreate 屏幕时，组件都会再次挂载并重置 FoodList，因此新添加的将是那里唯一的项目，您将其作为参数返回到仅显示一项的饮食屏幕。

这是一个更好的方法。

将状态管理移至饮食屏幕

class Diet extends Component {
  constructor(props) {
    super(props);

    this.state = {
      foodList: [],
    };
  }
 
 // Use this to update state.
  static getDerivedStateFromProps(props, state) {
    if (props.route.params?.food) {
      return { foodList: [...state.foodList, props.route.params.food] };
    }
    return null;
  }

并在flatlist中显示state中的值

 <FlatList data={this.state.foodList} ...

如下所示更改 submitFood 以仅发送新创建的项目

submitFood = (food, calories) => {
 
        this.props.navigation.navigate("Diet", {
          food: {
            key: Math.random(),
            foodName: food,
            calories: calories,
          },
        });
  }

更简单的方法是切换到功能组件，你可以参考这里的文档 https://reactnavigation.org/docs/params/#passing-params-to-a-previous-screen

【讨论】：