React - Material UI 表在每一行中包含一个下拉列表答案

【问题标题】：React - Material UI table to contain a dropdown in each rowReact - Material UI 表在每一行中包含一个下拉列表
【发布时间】：2021-02-03 17:38:43
【问题描述】：

所以我有这个表，我从数组映射中渲染了它的行，如下所示

<TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Object Name</TableCell>
                  <TableCell align="center">Object Field and Values</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {union &&
                  unionArray.map((row) => (
                    <TableRow key={row.name}>
                      <TableCell component="th" scope="row">
                        {row.name}
                      </TableCell>
                      {Object.keys(row).map((key) =>
                        key === "name" ? (
                          ""
                        ) : (
                          <TableCell align="center">
                            {/*insert dropdown select*/}
                            <FormControl
                              variant="outlined"
                              className={classes.formControl}
                            >
                              <InputLabel htmlFor="outlined-age-native-simple">
                                Values
                              </InputLabel>
                              <Select
                                native
                                label="Value"                                
                              >
                                <option aria-label="None" value="" />
                                <option>{key}:{row[key]}</option>                                
                              </Select>
                            </FormControl>
                          </TableCell>
                        )
                      )}
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </TableContainer>

我映射的对象数组如下所示。即联合数组

我的问题是具有第三个键/值对的行呈现为整个表格单元格，我只是希望它们成为下拉列表的一部分。现在的输出是这样的

【问题讨论】：

标签： javascript reactjs material-ui dropdown

【解决方案1】：

你可以修改你从 api 获得的数组，然后像这样：

let modifiedUnion = unionArray.map(el=>{
  let tempObj={}
  let values=[]
  Object.keys(el).map(key=>
    if(key!=="name"){
      tempObj.values = values.push({[key]:el[key]})
    }else{
      tempObj.name = el.name
    }
  return tempObj
})

然后这样写这部分：

{modifiedUnion.map((row) => (
  <TableRow key={row.name}>
    <TableCell align="center">
      {row.name}
    </TableCell>
    <TableCell align="center">
      <FormControl variant="outlined" className={classes.formControl}> 
        <InputLabel htmlFor="outlined-age-native-simple">
          Values
        </InputLabel>
        <Select native label="Value">
          <option aria-label="None" value="" />
            {row.values.map((key) =>
              <option>{Object.keys(key)[0]}:{Object.values(key)[0]}</option>    
            )}                             
        </Select>
      </FormControl>
    </TableCell>
  </TableRow>
))}

【讨论】：

【解决方案2】：

我没有足够的声誉来发表评论，但答案在于@lakshya 的回复和@ahmed 的评论。 Object.keys 将在 key === 'name' 时返回 null，但在键不是 name 时返回有效 JSX，因此，您的表格单元格有 2 个下拉菜单。

至于如何格式化响应，您可以像所附图片那样格式化循环。

【讨论】：

【解决方案3】：

将对象转换为类似的格式

[{
    name: 'obj1',
    values: [
      {
        a: 1
      }
    ]
  },
  {
    name: 'obj3',
    values: [
      {
        c: 2,
        d: 5
      }
    ]
  }
]

【讨论】：

对象来自外部 API，我认为这工作量太大
应该很容易。您可以创建一个函数，将 API 的响应作为输入，然后将此 JSON 作为输出。