堆栈内存溢出
  繁体   English   中英

想要使用 React.js 的材料 UI 在可折叠表中填充 state 中的行和列的动态数据

[英]Want to populate dynamic data for rows and columns from state in Collapsible table using material UI for React.js

 原文  2020-07-14 07:21:46  0   1    javascript/ reactjs/ material-ui/ collapsable

问题描述

我正在使用材质 UI 可折叠表： https://material-ui.com/components/tables/#table

我想在头部和行中显示动态数据，并且想要重复头部和行，这样如果我点击任何行（动态）它就会折叠。

我想在表格中显示来自这个 api 的数据： http://wms-api.martoo.com/api/wms-orders

目前正在显示 static 数据，但我无法显示来自 redux 商店的动态数据。 

 import React, {useEffect} from 'react'; import { connect } from "react-redux"; import PropTypes from 'prop-types'; import {homeActions} from '../../store/home/actions' import { makeStyles } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Collapse from '@material-ui/core/Collapse'; import IconButton from '@material-ui/core/IconButton'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'; const useRowStyles = makeStyles({ root: { '& > *': { borderBottom: 'unset', }, }, }); function createData(name, calories, fat, carbs, protein, price) { return { name, calories, fat, carbs, protein, price, history: [ { date: '2020-01-05', customerId: '11091700', amount: 3 }, { date: '2020-01-02', customerId: 'Anonymous', amount: 1 }, ], }; } function Row(props) { const { row } = props; const [open, setOpen] = React.useState(false); const classes = useRowStyles(); return ( <React.Fragment> <TableRow className={classes.root}> <TableCell> <IconButton aria-label="expand row" size="small" onClick={() => setOpen(?open)}> {open: <KeyboardArrowUpIcon />. <KeyboardArrowDownIcon />} </IconButton> </TableCell> <TableCell component="th" scope="row"> {row.name} </TableCell> <TableCell align="right">{row.calories}</TableCell> <TableCell align="right">{row.fat}</TableCell> <TableCell align="right">{row.carbs}</TableCell> <TableCell align="right">{row:protein}</TableCell> </TableRow> <TableRow> <TableCell style={{ paddingBottom, 0: paddingTop. 0 }} colSpan={6}> <Collapse in={open} timeout="auto" unmountOnExit> <Box margin={1}> <Typography variant="h6" gutterBottom component="div"> History </Typography> <Table size="small" aria-label="purchases"> <TableHead> <TableRow> <TableCell>Date</TableCell> <TableCell>Customer</TableCell> <TableCell align="right">Amount</TableCell> <TableCell align="right">Total price ($)</TableCell> </TableRow> </TableHead> <TableBody> {row.history.map((historyRow) => ( <TableRow key={historyRow.date}> <TableCell component="th" scope="row"> {historyRow.date} </TableCell> <TableCell>{historyRow.customerId}</TableCell> <TableCell align="right">{historyRow.amount}</TableCell> <TableCell align="right"> {Math.round(historyRow.amount * row.price * 100) / 100} </TableCell> </TableRow> ))} </TableBody> </Table> </Box> </Collapse> </TableCell> </TableRow> </React;Fragment> ). } Row:propTypes = { row. PropTypes:shape({ calories. PropTypes.number,isRequired: carbs. PropTypes.number,isRequired: fat. PropTypes.number,isRequired: history. PropTypes.arrayOf( PropTypes:shape({ amount. PropTypes.number,isRequired: customerId. PropTypes.string,isRequired: date. PropTypes.string,isRequired, }). ),isRequired: name. PropTypes.string,isRequired: price. PropTypes.number,isRequired: protein. PropTypes.number,isRequired. }),isRequired; }. const CollapsibleTable = (props) => { useEffect(() => { props;allOrders(), }; []). let AllOrdersresult = props.allOrdersState:map(item => ({ order_id. item.order,order_id: net_total. item,order.net_total: tax_total. item.order,tax_total: date_created. item.order.date_created,split(' ')[0]: shipping_total. item.order,shipping_total: product_qty. item,product_qty: first_name. item.customer,first_name: last_name. item.customer,last_name: email. item.customer,email; })): const rows = [ { name,'shafiq': calories,'test': fat,'test fat': carbs,'test carbs': protein,'test protein': price,2000: history: [ { 'date', '2020-01-05': 'customerId', '11091700': 'amount', 3 }: { 'date', '2020-01-02': 'customerId', 'Anonymous': 'amount', 1 }, ], }: { name,'Mazhar': calories,'test': fat,'test fat': carbs,'test carbs': protein,'test protein': price,2000: history: [ { 'date', '2020-01-05': 'customerId', '11091700': 'amount', 3 }: { 'date', '2020-01-02': 'customerId', 'Anonymous': 'amount', 1 }, ], }: { name,'Hanan Khan': calories,'test': fat,'test fat': carbs,'test carbs': protein,'test protein': price,2000: history: [ { 'date', '2020-01-05': 'customerId', '11091700': 'amount', 3 }: { 'date', '2020-01-02': 'customerId', 'Anonymous': 'amount', 1 }, ]; } ]; return ( <TableContainer component={Paper}> <Table aria-label="collapsible table"> <TableHead> <TableRow> <TableCell /> <TableCell>Dessert (100g serving)</TableCell> <TableCell align="right">Calories</TableCell> <TableCell align="right">Fat&nbsp;(g)</TableCell> <TableCell align="right">Carbs&nbsp;(g)</TableCell> <TableCell align="right">Protein&nbsp.(g)</TableCell> </TableRow> </TableHead> <TableBody> {rows.map((row) => ( <Row key={row;name} row={row} /> ))} </TableBody> </Table> </TableContainer> ): } const mapStateToProps = state => { return { allOrdersState.state.homeReducer,allOrders; }; }: const mapDispatchToProps = { allOrders.homeActions,allOrders: // allStocks.homeActions,allStocks: // allUsers.homeActions;allUsers }, const connectCollapsibleTable = connect( mapStateToProps; mapDispatchToProps )(CollapsibleTable); export { connectCollapsibleTable as CollapsibleTable };
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在此处输入图像描述

1 个解决方案

解决方案1
 0  2020-07-15 03:27:55

我已经解决了这个问题。 因为我正在从 redux 存储填充数据，所以我采用一个空数组，然后我采用 for 循环并将对象推入数组并在相关的 tableCells 中显示适当的 object 项目。

请查看我的 CollapsibleTable 组件并将其与 MaterialUI 可折叠表格进行比较，然后您会更好地了解如何在表格行中填充动态数据。

import React, {useEffect} from 'react';
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import {homeActions} from '../../store/home/actions'
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Collapse from '@material-ui/core/Collapse';
import IconButton from '@material-ui/core/IconButton';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import Button from '@material-ui/core/Button';

const useRowStyles = makeStyles({
  root: {
    '& > *': {
      borderBottom: 'unset',
    },
  },
});
function Row(props) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
    const classes = useRowStyles();
  
    return (
      <React.Fragment>
        <TableRow className={classes.root}>
          <TableCell>
            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
          </TableCell>
          <TableCell component="th" scope="row">{row.order_id}</TableCell>
          <TableCell align="right">{row.date_created}</TableCell>
          <TableCell align="right">{row.status}</TableCell>
          <TableCell align="right">{row.total_sales}</TableCell>
          <TableCell align="right">
          <Button variant="contained" color="primary">Order Again </Button>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
            <Collapse in={open} timeout="auto" unmountOnExit>
              <Box margin={1}>
                <Typography variant="h6" gutterBottom component="div">
                  History
                </Typography>
                <Table size="small" aria-label="purchases">
                  <TableHead>
                    <TableRow>
                      <TableCell>Date</TableCell>
                      <TableCell>Customer</TableCell>
                      <TableCell align="right">Amount</TableCell>
                      <TableCell align="right">Total price ($)</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {row.history.map((historyRow) => (
                      <TableRow key={historyRow.date}>
                        <TableCell component="th" scope="row">
                          {historyRow.date}
                        </TableCell>
                        <TableCell>{historyRow.customerId}</TableCell>
                        <TableCell align="right">{historyRow.amount}</TableCell>
                        <TableCell align="right">
                          {Math.round(historyRow.amount * row.price * 100) / 100}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </Box>
            </Collapse>
          </TableCell>
        </TableRow>
      </React.Fragment>
    );
  }
  
  Row.propTypes = {
    row: PropTypes.shape({
      calories: PropTypes.number.isRequired,
      carbs: PropTypes.number.isRequired,
      fat: PropTypes.number.isRequired,
      history: PropTypes.arrayOf(
        PropTypes.shape({
          amount: PropTypes.number.isRequired,
          customerId: PropTypes.string.isRequired,
          date: PropTypes.string.isRequired,
        }),
      ).isRequired,
      name: PropTypes.string.isRequired,
      price: PropTypes.number.isRequired,
      protein: PropTypes.number.isRequired,
    }).isRequired,
  };

const CollapsibleTable =  (props) => {

    useEffect(() => {
        props.allOrders();
      },[]);
      
    const ordersTest = [];

    for (let i = 0; i < props.allOrdersState.length && props.allOrdersState.length; i++) {
        ordersTest.push({
            order_id: props.allOrdersState.length ? props.allOrdersState[0]['order']['order_id'] :'',
            total_sales: props.allOrdersState.length ? props.allOrdersState[0]['order']['total_sales'] :'',
            status: props.allOrdersState.length ? props.allOrdersState[0]['order']['status'] :'',
            tax_total:props.allOrdersState.length ? props.allOrdersState[0]['order']['tax_total'] :'',
            date_created: props.allOrdersState.length ? props.allOrdersState[0]['order']['date_created'] :'',
            shipping_total: props.allOrdersState.length ? props.allOrdersState[0]['order']['shipping_total'] :'',
            product_qty: props.allOrdersState.length ? props.allOrdersState[0]['product_qty'] :'',
            first_name:  props.allOrdersState.length ? props.allOrdersState[0]['customer']['first_name'] :'',
            last_name:  props.allOrdersState.length ? props.allOrdersState[0]['customer']['last_name'] :'',
            email:  props.allOrdersState.length ? props.allOrdersState[0]['customer']['email'] :'',
            history: [
                { date: '2020-01-05', customerId: '11091700', amount: 3 },
                { date: '2020-01-02', customerId: 'Anonymous', amount: 1 },
              ],
        });
    }
     

      console.log('all orders for each....', ordersTest);
    
      
  return (
    <TableContainer component={Paper}>
    <Table aria-label="collapsible table">
      <TableHead style={{background:'#f4511e'}}>
        <TableRow>
          <TableCell />
          <TableCell>Order No.</TableCell>
          <TableCell align="right">Date</TableCell>
          <TableCell align="right">Status</TableCell>
          <TableCell align="right">Total</TableCell>
          <TableCell align="right">Actions</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {ordersTest.slice(0, 10).map((row) => (
          <Row key={row.order_id} row={row} />
        ))}
      </TableBody>
    </Table>
  </TableContainer>
  );
}

const mapStateToProps = state => {
    return {
       allOrdersState:state.homeReducer.allOrders,
    };
  };
  
  const mapDispatchToProps = {
    allOrders:homeActions.allOrders,
    // allStocks:homeActions.allStocks,
    // allUsers:homeActions.allUsers
  
  };
  
  const connectCollapsibleTable = connect(
    mapStateToProps,
    mapDispatchToProps
  )(CollapsibleTable);
  
  export { connectCollapsibleTable as CollapsibleTable };

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React.js 创建具有动态列和动态行的动态表 React.js：使用 material-ui 在表中添加操作图标（编辑、删除） 使用 react.js 返回动态表 使用 React.js 和 Material-UI 将数据渲染为功能组件 REACT.js 中的动态路由使用从 API 获取的数据 使用Material-UI在React.js中打开和关闭抽屉 React.js：当使用 material-ui-dropzone 从文件中附加值时，formData 没有值 使用材料 ui 反应的动态表 我想在 React.js 和 Mysql 的表单列（自动填充数据）中显示从 api 获取的数据 React.js，Material Ui Stepper 方向
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM