@constant101

Как корректно передать переменные с json данными в другой компонент через контекст?

Пытаюсь передать переменные с json данными в компонент для их дальнейшего использования, но натыкаюсь на ошибки. Что следует изменить чтобы переменные с json массивами из Store.js можно было использовать в product.js?
Спасибо за уделенное время!

https://jsfiddle.net/constant101/xu7zdn26/3/

```
//Store export(receiving data from the server and assigning them to variables)
import React, {useState, useEffect} from 'react'
import axios from 'axios'


export const ListContext = React.createContext([]);
export const ItemContext = React.createContext([]);

function Store() {
  const [storeProducts, setStoreProducts] = useState([]);
  const [detailProduct, setDetailProduct] = useState([]);

   useEffect(() => {
    axios.get('/products/')
    .then(res => {
      console.log(res)
      setStoreProducts(res.data)
    })
    },[])
console.log('storeProducts:', storeProducts)

 useEffect(() => {
    axios.get('/products/:productId')
    .then(res => {
      console.log(res)
      setDetailProduct(res.data)
    })
    },[])
console.log('detail product:', detailProduct)
  return (
  	
    <ListContext.Provider value={[storeProducts, setStoreProducts]}>
     <ItemContext.Provider value={[detailProduct, setDetailProduct]}>
       <product/>
        </ItemContext.Provider>
    </ListContext.Provider>


    );
}
export const detailProduct
//product.js ( file that uses data from the fetch)
import React, { useReducer, createContext, useContext, useState } from 'react';
import {ListContext, ItemContext } from '../Store';
import { useProductActions } from '../actions';
import { SET_PRODUCT_DETAILS } from '../actions/types';

  const [storeProducts] = useContext(ListContext);
  const [detailProduct] = useContext(ItemContext);

let tempProducts = [];

storeProducts.forEach(item => tempProducts.push({ ...item })
  );

const initialState = {
  products: tempProducts,
  productDetails: { ...detailProduct }
};
console.log(storeProducts)

const productReducer = (state, action) => {
  switch (action.type) {
    case SET_PRODUCT_DETAILS:
      return {
        ...state,
        productDetails: action.payload
      };
    default:
      throw new Error('Invalid action type');
  }
};

export const ProductContext = createContext(initialState);

export const useProductState = () => {
  return useContext(ProductContext);
};

export const ProductProvider = ({ children }) => {
  const [state, dispatch] = useReducer(productReducer, initialState);
  const productActions = useProductActions(state, dispatch);
  return (
    <ProductContext.Provider value={{ productState: state, productActions }}>
      {children}
    </ProductContext.Provider>
  );
};

```
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы