将项目添加到 Flatlist、React Native 时遇到问题

Question

饮食（屏幕）

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>

创建食物（屏幕）

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 不会保留我插入的项目。

Answer 1

这里的问题是导航的工作方式，每次打开 FoodCreate 屏幕时，都会再次安装组件并重置 FoodList，因此新添加的将是那里唯一的项目，您 return 将此作为 Diet 屏幕的参数，它将仅显示一个项目。

这是一个更好的方法。

将状态管理移动到饮食屏幕

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中显示状态中的值

 <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

将项目添加到 Flatlist、React Native 时遇到问题

Trouble on adding items to Flatlist, React Native

javascript

reactjs

react-native

react-native-flatlist

react-hooks