Php 如何从数据库获取数据并映射到react？

数据来自数据库是非常好的，但我不知道如何映射数据或如何调用来自数据库的特定列

有什么建议吗！如果有人用代码解决这个问题，那就更好了

渲染功能

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

返回(
订单摘要
{products.name}
{products.total}
全部的
{'Rs.+products.net_total}
);

这是我的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
方法对其进行迭代。您可以通过如下方式访问每个对象的键分解参数，例如：

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

返回(
订单摘要
{products.map（{name，total，net_total}）=>
{name}
{total}
全部的
{'Rs.+net_total}
)}
);
出现了一个错误，它说products.map不是一个函数。您的
产品似乎不是一个数组。我的建议是检查您的服务器端代码，确保为每个产品创建一个对象列表，并将其作为数组存储在您的可变状态中。我真的建议您一步一步地执行此操作，并尝试查看“网络”选项卡，添加一些调试输出等。这里有很多小错误。我尝试了很多，但不知道如何获取数据。我已经做了一些调试和输出。但是它说products.map不是一个函数。我还声明const[products，setProducts]=useState（[]）；PHP方面也是错误的。你能纠正它吗？请