ReactJS: Как присвоить переменным результат fetch(список объектов)?

Новичок в js: Необходимо использовать переменные storeProducts(массив объектов) и detailProduct(конкретный объект) далее в программе, но они не видны за пределами getDetails. Как решить данную дилемму? Пробовал присваивать без асинхронной функции и await, но в таком случае, вместо массива объектов возвращают Promise {}.

let tempProducts = [];


async function getDetails(products, product){
  const storeProducts = await fetch('https:/products/').then(res => res.json());
  const detailProduct = await fetch('https:/products/:id').then(res => res.json());
}

getDetails();

Object.keys(storeProducts/*undefined*/).forEach(item => tempProducts.push({ ...item })
  );

const initialState = {
  products: tempProducts,
  productDetails: { ...detailProduct/*undefined*/ }
};

Спасибо за ответ, пардон за банальность вопроса

Тут вернее инициализировать initialState с пустыми массивами, а значения положить в стор позже в результате ajax-а.

Имеется в виду использование useState? Или без него можно обойтись?

Чтобы использовать переменные далее в программе и чтобы они были видны за пределами getDetails их просто нужно сделать глобальными 🧐:

let tempProducts = [];
let storeProducts
let detailProduct

async function getDetails(products, product){
 storeProducts = await fetch('https:/products/').then(res => res.json());
 detailProduct = await fetch('https:/products/:id').then(res => res.json());
}

getDetails();

Но к сожалению это не решит вашу основную проблему 😕
Так как функция getDetails асинхронная, то новые значения в переменных storeProducts и detailProduct появятся не сразу, а через некоторое время по завершению аякс запросов и только лишь в случаи удачных ответов от сервера.

Чтобы помочь вам в решение вашего вопроса нужно понимать когда вы будете использовать эти переменные и для каких целей
Я бы вам посоветовал переформулировать вопрос и описать цель задачи, так как Ваш вопрос, выглядит так, что вы придумали решение и столкнулись с проблемой, но решение этой проблемы не решит основную задачу

Здравствуйте. Необходимо сразу подгружать товары. Ранее, все хранилось в json формате в локальном файле и импортировалось в product.js. Сейчас - нужно подгружать те же массивы объектов с сервера. Попробовал перенести загрузку в файл, в котором ранее хранился json код, но наткнулся на отстутствие понимания, как экспортировать переменные из useState. Link:
https://jsfiddle.net/constant101/br0L4a2n/1/

Попробовал осуществить.
Пытаюсь передать переменные с 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 (







);
}
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 (

{children}

);
};

В коде намешана куча, как мне кажется, несоотносящегося кода, думаю это в следствие экспериментов. В этом возможно, но очень сложно разобраться.

Вижу что ты пытаешься решить задачу в виде формы “положить данные в переменную, забрать данные из переменной”. Этот принцип не работает во многих случаях (только на курсах и демках), и твой случай как раз такой что нужен чуть другой подход.

Вот схематически что я имел в виду. Комментарии имеют значение

class MyView extend React.Component {
	constructor() {
		// начальное состояние - пустые массивы
		this.state = {
			storeProducts: [],
			detailProduct: []
		}
	}

	componentDidMount() {
		// когда компонент показывается на странице - делаешь запрос, результат складываешь в состояние
		// не обязательно состояние делать локальным. Можно такого же эффекта добиться с Redux/Mobx и иже с ними.
		axios.get('https:/products/')
			.then(res => {
				this.setState({
					detailProduct: res.data
				})
				// возможно тут ты хочешь начать слать запросы на https:/products/:id за деталями каждого продукта
			})
	}

	// в рендере ведешь себя так будто элементы detailProduct уже есть. Когда результат ajaxа обновит стор, то увидишь
	// отрендеренные элементы
	render() {
		return <div>
			<ul>
				{this.state.detailProduct.map(product => {
					return <li>{JSON.stringify(product)}</li>
				})}
			</ul>
		</div>
	}
}