Как изменить состояние с помощью информации из выбранного элемента с помощью React Context API

Необходимо перемещаться и показывать сведения о товаре, по которому был сделан клик. У меня есть правильный элемент, возвращаемый в моем журнале консоли, но я не знаю, как редактировать/устанавливать состояние и заменять фиктивный текст значением элемента, на который нажали. Я использую Content API для управления состоянием, и данные поступают из отдельного файла, который импортируется в мой Context.js.

Контекст.js

import React, { useState, createContext } from 'react';
import { storeProducts, detailProduct } from './data';

export const ProductContext = createContext();

export const ProductProvider = (props) => {

    const [ products ] = useState(storeProducts);
    const [ dummyDetails ] = useState(detailProduct);

    const getItem = (id) => {
    const product = products.find(item => item.id === id);
    return product;
    }

    const showDetails = (id) => {
        const product = getItem(id);
        console.log(product);
        console.log(dummyDetails);
    };

    const addToCart = (id) => {
    console.log(id);
    };


    return (
        <ProductContext.Provider value={[ products, dummyDetails, showDetails, addToCart ]}>
        { props.children }
        </ProductContext.Provider>
    );
}

У меня есть информация, возвращаемая функцией getItem, и 2 console.logs в showDetails дают мне dummyDetails и сведения о продукте. Мне нужно обменять продукт на dummyDetails. Заранее спасибо.


reactjs react-context react-state-management
person paul blackmore    schedule 14.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете установить продукт по возврату функции из useState

const [ dummyDetails, setProduct ] = useState(detailProduct);

const showDetails = (id) => {
   const product = getItem(id);
   setProduct(product);
};
person Giang Le    schedule 14.05.2019