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

【问题标题】：React-Native + Redux passing ID to componentReact-Native + Redux 将 ID 传递给组件
【发布时间】：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 的任何位置？

标签： reactjs react-native redux react-redux components

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

希望我没有误解你的问题。

【讨论】：