React-Native + Redux 将 ID 传递给组件

Posted 2023-02-23

技术标签:

【中文标题】React-Native + Redux 将 ID 传递给组件【英文标题】：React-Native + Redux passing ID to component 【发布时间】：2019-02-18 04:20:00 【问题描述】：

我是 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 没有导航？

我希望我能弄清楚我的问题是什么，并期待您的解决方案和帮助:)

【问题讨论】：

menuId 是否存储在 state 的任何位置？ 【参考方案1】：

也许你应该更好地将你的 React 组件（基本上是视图）和你的 reducer/副作用（数据获取......）组件分开。

状态在 Redux 存储中，视图只显示存储中的内容。

如果您不想通过导航参数传递menuId，您可以将其添加到您的商店状态 - 基本上您在减速器的状态中添加一个字段来保存当前选择的menuId。

在您的 Restaurant-Details 屏幕中，当调用 onPress 时，您将带有 selectedMenuId 的操作发送到您的 redux 商店。然后在您的 product 屏幕中，从您的 redux 存储中检索 selectedMenuId。

为了理解 Redux 架构，我喜欢这个 gif：

【讨论】：

【参考方案2】：

既然您已经在使用 Redux，为什么不将您当前正在查看的菜单 ID 存储在您的商店中呢？当用户选择一个菜单项时，调度一个动作来设置当前的菜单 ID。然后使用选择器来获取你需要的组件中的菜单ID。