React-Native + Redux 將 ID 傳遞給組件

Question

我是 react-native 的新手，最近在我的應用中實現了 Redux。 該應用程序用於在餐廳點餐 :)

這是我的餐廳詳細信息屏幕的片段，帶有卡片，代表不同的菜單：

<View style={{alignItems: 'center'}}>
                        {menus.map((item) => {
                            return (
                                <Card style={{width: '95%'}}>
                                    <TouchableOpacity onPress ={() => this.props.navigation.navigate('Products', { menuId: item.sk_id } ,{bestellung})}>
                                        <CardItem cardBody style={{justifyContent: 'center', alignItems: 'center'}}>
                                            <Text style={styles.textdes}> {item.typ} </Text>
                                        </CardItem>
                                    </TouchableOpacity>
                                </Card>
                            )
                        })}

如您所見，onPress 函數導航到產品屏幕並傳遞一個 menuId！ （產品屏幕顯示特定菜單的所有食物）

這是我的Product.js ：

class Products extends Component {
constructor(props) {
    super(props);
    this.state = {
        loading: 1
    };
}
componentDidMount = () => {

    this.props.fetchProducts();
    this.state.menuId;
}
addItemsToCart = (product) => {
    this.props.addToCart(product);
}
render() {
    const { products, navigation } = this.props
     const {params} = this.props.navigation.state;
      const menuId = params ? params.menuId : null;
    return (
        <View style={styles.container}>
            <Header style={styles.header}>
                <Left>
                    <Button transparent onPress={() => 
                     this.props.navigation.goBack()}>
                        <Icon style={{ fontSize: 35, color: '#FFFFFF'}} 
                         active name="arrow-back" />
                    </Button>
                </Left>
                <Body>
                    <Title style={{ fontSize: 25}}>{menuId}</Title>
                </Body>
                <Right style={{position: 'absolute', right: 20}}>
                    <Cart navigation={navigation}/>
                </Right>
            </Header>
            <StatusBar barStyle="light-content" backgroundColor="#383838" 
              translucent={false} />
            <View style={styles.bodyProducts}>
                <View>
                    <Text style={{color: 
                     '#000', fontSize: 50}}>{menuId}</Text>
                </View>
                <FlatList
                data={products}
                renderItem={({item}) => 
                   <Product item={item} addItemsToCart= 
                   {this.addItemsToCart} product={item}/>}
                keyExtractor ={(item) => item.id}
               />
            </View>

        </View>
    );
}
}
const mapStateToProps = (state) => ({
products: state.products.items

})

export default connect(mapStateToProps {addToCart,fetchProducts})(Products);

Product.js從我的product.component.js獲取產品：

 class Product extends Component {
addToCart = () => {
    this.props.addItemsToCart(this.props.item)
}



render() {
    const { product, menuId } = this.props;
    return (
        <Card>
        <View style={styles.container}>

            <Image source={product.picture} style={{width:400,height:150}}/>
            <View style={styles.productDes}>
                <CardItem cardBody style={{justifyContent: 'center', 
                   alignItems: 'center'}}>

                <Text style={styles.font}>{menuId}</Text>
                </CardItem>
                <Text style={{fontSize: 20}}>€{(product.cost).toFixed(2)} 
                 </Text>
                <Text style={{fontSize: 16}}>{product.description}</Text>
                <TouchableOpacity onPress={this.addToCart} style= 
                    {styles.addBtn}>
                    <Text style={styles.text}>Hinzufügen</Text>
                </TouchableOpacity>
            </View>
        </View>
                        </Card>

    );
}

}

export default Product;

現在的問題是：如何在沒有導航的情況下將 menuId 從 product.js 傳遞到 product.component.js？

我希望我能說清楚，我的問題是什么，並期待您的解決方案和幫助:)

Answer 1

也許你應該更好地分離你的 React 組件——基本上是視圖——和你的減速器/副作用（數據獲取......）組件。

狀態在 Redux Store 中，Views 只顯示存儲中的內容。

如果您不想通過導航參數傳遞menuId ，您可以將其添加到您的商店狀態 - 基本上您在減速器的狀態中添加一個字段以保存當前選擇的menuId 。

在您的Restaurant-Details屏幕中，當調用onPress ，您將帶有selectedMenuId的操作分派到您的 redux 存儲。 然后在您的產品屏幕中，您從您的 redux 存儲中檢索selectedMenuId 。

為了理解 Redux 架構，我喜歡這個 gif：

Answer 2

既然您已經在使用 Redux，為什么不將您當前正在查看的菜單 ID 存儲在您的商店中呢？ 當用戶選擇一個菜單項時，調度一個動作來設置當前菜單 ID。 然后使用選擇器來獲取您需要的組件中的菜單 ID。

我希望我沒有誤解你的問題。

React-Native + Redux 將 ID 傳遞給組件

問題描述

2 個解決方案

解決方案1
0 2018-09-13 14:58:39

解決方案2
0 2021-02-02 02:12:15

React-Native + Redux 將 ID 傳遞給組件

問題描述

2 個解決方案

解決方案1 0 2018-09-13 14:58:39

解決方案2 0 2021-02-02 02:12:15

解決方案1
0 2018-09-13 14:58:39

解決方案2
0 2021-02-02 02:12:15