javascript - 使用 useState 钩子基于 Web Api 向 React Native 动态添加状态
问题描述
我有以下问题:
我打算通过 Web API 获取数据,在此基础上,React Native 将使用 FlatList 呈现它。它将使用一个子组件,在这种情况下(复选框)。所以,会有多个复选框。
当我不知道它们的计数然后将它们的状态传递给子组件时,如何创建和更新这些复选框的状态?
const data = [{
id:0,
product:"A"
price:30
},
{
id:1,
product:"B"
price:20
},
{
id:1,
product:"C"
price:10
}]
(我在挠头)
解决方案
输出:
这是一个应用程序的工作示例,显示了数据选择和数据流到下一个屏幕,实现数据获取和相应的服务器端执行。
import React, { useState, useEffect } from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
CheckBox,
Button,
Modal,
} from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const data = [
{
id: 0,
product: 'A',
price: 30,
selected: false,
},
{
id: 2,
product: 'B',
price: 20,
selected: false,
},
{
id: 3,
product: 'C',
price: 10,
selected: false,
},
];
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Payment" component={PaymentScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
function PaymentScreen({ navigation, route }) {
const { selected } = route.params;
return (
<FlatList
data={selected}
renderItem={({ item }) => (
<Card style={{ margin: 5 }}>
<View style={styles.card}>
<View
style={{
flexDirection: 'row',
width: 50,
justifyContent: 'space-between',
}}>
<Text>{item.product}</Text>
</View>
<Text>{item.price} USD</Text>
</View>
</Card>
)}
/>
);
}
function HomeScreen({ navigation }) {
const [products, setProducts] = useState(data);
const [showModal, setShowModal] = useState(false);
const [selected, setSelected] = useState([]);
const handleChange = (id) => {
let temp = products.map((product) => {
if (id === product.id) {
return { ...product, selected: !product.selected };
}
return product;
});
setProducts(temp);
};
const getSelected = () => {
let temp = products.filter((product) => product.selected);
setSelected(products.filter((product) => product.selected));
console.log(temp);
};
useEffect(() => {
getSelected();
}, [showModal]);
return (
<View style={styles.container}>
<Modal animationType="slide" transparent={true} visible={showModal}>
<View style={styles.modalView}>
<FlatList
data={selected}
renderItem={({ item }) => (
<Card style={{ margin: 5 }}>
<View style={styles.card}>
<View
style={{
flexDirection: 'row',
width: 50,
justifyContent: 'space-between',
}}>
<Text>{item.product}</Text>
</View>
<Text>{item.price} USD</Text>
</View>
</Card>
)}
/>
<Text>
Total :{' '}
{selected.reduce((acc, curr) => acc + curr.price, 0).toString()}
</Text>
<Button
title={'BUY'}
onPress={
selected
? () => {
setShowModal(false);
navigation.navigate('Payment', { selected: selected });
}
: setShowModal(false)
}
/>
</View>
</Modal>
<FlatList
data={products}
renderItem={({ item }) => (
<Card style={{ margin: 5 }}>
<View style={styles.card}>
<View
style={{
flexDirection: 'row',
width: 50,
justifyContent: 'space-between',
}}>
<CheckBox
value={item.selected}
onChange={() => {
handleChange(item.id);
}}
/>
<Text>{item.product}</Text>
</View>
<Text>{item.price} USD</Text>
</View>
</Card>
)}
/>
<Button
title={'ADD TO CART'}
onPress={() => {
setShowModal(true);
console.log(showModal);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
padding: 10,
margin: 5,
flexDirection: 'row',
justifyContent: 'space-between',
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 5,
justifyContent: 'space-between',
alignItems: 'center',
elevation: 5,
},
});
您可以在这里使用工作代码:Expo Snack
推荐阅读
- docker - 无法删除具有依赖子项的 docker 映像
- java - 发生 JNI 错误
- java - 如何在 onNext 调用中从上下文/范围中获取变量?(java/grpc)
- docker - 如何在 Docker 容器中打包单次使用的可执行文件?
- swift - Safari 应用程序扩展:Popover 中的 WKWebKit 未加载内容
- google-chrome - 在 Chrome@Windows 上为 google_debug.log 赋予有意义的名称
- sql - 在 SQL 中选择值计数为 1 的列标题
- ios - 如何调用 func renderer(_:didAdd:for:)
- javascript - 在 slideToggle 之后 HTML Canvas 高度默认为 1
- diagnostics - 在 CAPL 中获取诊断信息