Новичок в js: Необходимо использовать переменные storeProducts(массив объектов) и detailProduct(конкретный объект) далее в программе, но они не видны за пределами getDetails. Как решить данную дилемму? Пробовал присваивать без асинхронной функции и await, но в таком случае, вместо массива объектов возвращают Promise {}.
Чтобы использовать переменные далее в программе и чтобы они были видны за пределами 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?
Спасибо за уделенное время!
В коде намешана куча, как мне кажется, несоотносящегося кода, думаю это в следствие экспериментов. В этом возможно, но очень сложно разобраться.
Вижу что ты пытаешься решить задачу в виде формы “положить данные в переменную, забрать данные из переменной”. Этот принцип не работает во многих случаях (только на курсах и демках), и твой случай как раз такой что нужен чуть другой подход.
Вот схематически что я имел в виду. Комментарии имеют значение
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>
}
}