Question

我是React Native的新手，我想为我的项目使用react钩子。我已将页面与useContext和useReducer连接起来，并且工作正常很好，但是我无法理解将另一个页面与已修改州。 我想全球化这些钩子。

项目结构：-

mydemo
----src
     --context
          ProductContext.js
          ProductReducer.js
          types.js
     --pages
       ---products
            index.js
            header.js
            single.js
            list.js

ProductContext.js中的代码

    import {createContext} from 'react'

const ProductContext = createContext({
    productlist:[],
    addToCart: (product) => {}
})

export default ProductContext

ProductReducer.js中的

代码

import {ADD_TO_CART} from './types';

const addToCart = (productId,state) =>{
    return {
        ...state,
        productList: state.productList.map((single) => (single.id === productId) ? {
            ...single,
            count: single.count + 1
        } : single)
    }
}

export default (state,action)=>{
    switch (action.type) {
        case ADD_TO_CART:
            return addToCart(action.payload, state);
        default:
            return state;
    }
}

index.js中的代码（在src / pages / products内部）

import React,{useReducer} from 'react'
import { View,StyleSheet } from 'react-native';

import Header from './header'
import List from './list'

import ProductReducer from '../../context/productReducer';
import ProductContext from '../../context/productContext';
import {ADD_TO_CART} from '../../context/types';

const ProductList = () => {

    const initialState = {
        productList:[
            {
                id:'0',
                name:'Coke',
                count:0
            },
            {
                id: '1',
                name: 'Pepsi',
                count: 0
            },
            {
                id: '2',
                name: 'Sprite',
                count: 0
            }
        ]
    }

    const [state, dispatch] = useReducer(ProductReducer, initialState);

    const addToCart = (productId) => {
        dispatch({
            type: ADD_TO_CART,
            payload: productId
        })

    }
    return (
        <ProductContext.Provider value={{productList:state.productList,addToCart}}>
            <View style={styles.container}>
                <Header/>
                <List addTocart={addToCart} />
            </View>
        </ProductContext.Provider>
    )
}
const styles = StyleSheet.create({
    container:{
        flex:1
    }
})

export default ProductList

通过此代码，我能够将单个产品的计数增加1，现在我想要另一个页面购物清单，其中将显示计数> 1的产品。因此，我必须将自己的钩子连接到该页面。我该如何实现？ 任何对此的帮助都会有所帮助。谢谢

如何在响应本机中使用全局挂钩？

0 个答案: