Как получить ценность от Promise и использовать ее позже?
Позвольте мне объяснить проблему, я пытаюсь показать некоторые детали в модальном окне. Я использую таблицу в модальном режиме, чтобы показать детали. В одном разделе мне нужно имя продукта, которое возвращается из запроса к базе данных, и я должен использовать это значение, возвращенное из базы данных. Код для таблицы выглядит следующим образом:
<tbody>
{item.cartItems.map((item, i) =>
<tr key = {item._id}>
<th scope = "row">{i + 1}</th>
<th><img src = {`${API}/product/photo/${item.product}`} alt = {item.product.name} width = "60px" height = "50px" /></th>
<td>{**data returned from database**}</td>
<td align = "center">{item.count}</td>
<td align = "center">৳ {item.price * item.count} </td>
</tr>
)}
</tbody>
Чтобы получить данные из базы данных, я использую функцию
const getProdcutName = id => {
var productName;
getProductDetails(id)
.then(response => {
productName = response.data.name;
});
return productName;
}
Но я не могу получить доступ к значению. Главное, на каждой итерации мне нужно отправить {item.product} в getProductName(id), а взамен мне нужно имя из базы данных. Но я не могу получить доступ к данным из области обещаний, чтобы вернуть их.
Отвечает ли это на ваш вопрос? Как вернуть ответ при асинхронном вызове?
@jsejcksn Привет, дорогой, не могли бы вы еще раз проверить проблему. Я отредактировал вопрос и попытался кратко объяснить проблему.
Ответы 1
Это решение моей проблемы. Спасибо всем, кто помог мне.
const CartItem = ({ item, i }) => {
const [productName, setProductName] = useState();
useEffect(() => {
getProductDetails(item.product)
.then(res => { setProductName(res.data.name) });
}, []);
return (
<tr key = {item._id}>
<th scope = "row">{i + 1}</th>
<th><img src = {`${API}/product/photo/${item.product}`} alt = {item.product.name} width = "60px" height = "50px" /></th>
<td>{productName == undefined ? "Getting Name" : productName}</td>
<td align = "center">{item.count}</td>
<td align = "center">৳ {item.price * item.count} </td>
</tr>
)}
И отправлять товары в корзинуItem
<tbody>
{item.cartItems.map((item, i) =>
<CartItem item = {item} i = {i} key = {item._id} />
)}
</tbody>
Обещание никогда не будет разрешено до выполнения оператора
returnи завершения функции, поэтомуproductNameвсегда будетundefinedв этот момент, аundefinedвсегда будет возвращаемым значением этой функции. Единственный вариант — вернуть обещание и обработать его в другом коде:const getProdcutName = (id) => getProductDetails(id).then(response => response.data.name);