[英]How to fetch data from database and map into react?
來自數據庫的數據非常好但我不知道如何 map 該數據或如何調用來自數據庫的特定列。 這是控制台向我顯示的 output,數據即將到來
請有任何建議。 如果有人用代碼解決這個問題會更好。
渲染 Function
const [products,setProducts] = useState({});
const classes = useStyles();
useEffect(()=>{
axios.post('/UserPortal/CartItems/checkout_details_summary.php' , {
customer_id: localStorage.getItem('Id'),
} )
.then((response) => {
console.log(response.data);
setProducts(response.data);
})
},[])
返回
return (
<React.Fragment>
<Typography variant="h4" gutterBottom>
Order summary
</Typography>
<List disablePadding>
<ListItem className={classes.listItem} key={products.name} >
<ListItemText secondary={'x' + products.quantity }>
<Typography variant="h4" gutterBottom>
{products.name}
</Typography>
</ListItemText>
<Typography variant="h5"> {products.total} </Typography>
</ListItem>
<ListItem className={classes.listItem}>
<ListItemText> <Typography variant="h4" gutterBottom>Total</Typography></ListItemText>
<Typography variant="h5" className={classes.total}>
{'Rs. ' + products.net_total }
</Typography>
</ListItem>
</List>
</React.Fragment>
);
這是我的 PHP 代碼
<?php
require 'connect.php';
$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata))
{
$request = json_decode($postdata);
$customer_id = $request->customer_id;
$sql = ("SELECT * FROM `checkout_details` WHERE `customer_id` = '{$customer_id}' LIMIT 1");
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
echo $json = json_encode($row);
}
我認為你的const [products,setProducts] = useState({});
應該是一個對象數組const [products,setProducts] = useState([]);
.
然后您可以使用.map
方法對其進行迭代。 您可以像這樣訪問每個 Object 解構參數的密鑰,例如:
return (
<React.Fragment>
<Typography variant="h4" gutterBottom>
Order summary
</Typography>
{products.map(({ name, total, net_total }) =>
<List disablePadding>
<ListItem className={classes.listItem} key={products.name} >
<ListItemText secondary={'x' + products.quantity }>
<Typography variant="h4" gutterBottom>
{name}
</Typography>
</ListItemText>
<Typography variant="h5"> {total} </Typography>
</ListItem>
<ListItem className={classes.listItem}>
<ListItemText> <Typography variant="h4" gutterBottom>Total</Typography></ListItemText>
<Typography variant="h5" className={classes.total}>
{'Rs. ' + net_total }
</Typography>
</ListItem>
</List>
)}
</React.Fragment>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.