javascript - 将项目添加到 Flatlist,React Native 时遇到问题
问题描述
饮食(屏幕)
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>
大家好,我正在尝试制作一个应用程序,用户必须在其中插入foodName
和calories
在FoodCreate
屏幕中,一旦他点击checkmark
它就会在屏幕中添加和(foodName
当我启动世博会时,第一个出现的屏幕是屏幕)。当我插入第一个食物时,一切都很好,但是当我想插入另一个时,我之前插入的那个消失了,它只显示我刚刚插入的那个。我不知道这是否与 Flatlist 或 React Navigation 有关。但是 Flatlist 不会保留我插入的项目。calories
Flatlist
Diet
Diet
解决方案
这里的问题是导航的工作方式,每次打开 FoodCreate 屏幕时,都会再次安装组件并重置 FoodList,因此新添加的将是那里唯一的项目,您将其作为参数返回到 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中显示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
推荐阅读
- .net - MSBuild 导入项目 MSBuildExtensionsPath32 依赖于版本
- imagemagick - Imagemagick 删除图像的区域
- flutter - 颤振:支持的语言抛出错误(Localizations.of
(上下文,MaterialLocalizations)返回 null) - java - 为什么 isSameMethod() 对于不同的路径返回 true?
- git - 错误:无法索引文件 'src/hoc/Aux.js'
- scala - Scala,Cats,`ap`的用法
- php - 在 PHP 项目中使用 ajax 问题重绘 HTML
- swift - 在 SwiftUI 中使用 CGContext
- javascript - 设计布局排序算法
- r - 部署 Shiny 应用程序时 RStudio 连接失败检索包