在 React 的映射中结合数组和字符串答案

【问题标题】：Combine Array and String in Mapping in React在 React 的映射中结合数组和字符串
【发布时间】：2022-01-08 04:44:03
【问题描述】：

我需要合并rows 和rows2。如果其中任何一个都没有值，则它们的值为“无”。我如何将它们结合起来？现在的问题是它创建了多个空行。

    <TableBody>
      {[...(rows || []), ...(rows2 || [])].map((row) => (
        <TableRow
          key={row.name}
          sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
        >
          <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>
      ))}
    </TableBody>

【问题讨论】：

那么，const a = "none"; console.log(...a) 打印什么？
@windowsill 同console.log("n", "o", "n", "e")
嘿约瑟夫，rows2 会一直是字符串吗？您将字符串作为字符数组传播。你能澄清你想要“组合”的东西吗？据我所知，您正在迭代一个，然后迭代另一个。这就是您想要做的，还是您想要“合并”任何行数据？你能提供一个预期输出的例子吗？
@DrewReese。否 rows 和 rows2 并不总是字符串。如果它们有值，它们将返回一个数组，如果它们没有值，它们将返回一个字符串“none”。我想结合rows 和rows2 将它们迭代到表中。 rows 和 rows2 具有相同的数据结构。
@DrewReese。当rows 有值而rows 返回“none”时，则只在表中迭代rows，反之亦然。如果两者的值都是“none”，则不要在表中迭代它们。

标签： reactjs ecmascript-6 react-hooks material-ui

【解决方案1】：

问题是您将字符串值“none”传播到字符数组中，然后将其映射到行。这会产生四个空行，对应于["n", "o", "n", "e"]。

假设您只想组合有时可能是字符串的两个“数组”值，并且只呈现实际具有行数据的行，请将 rows 和 rows2 值复制到数组中（不扩散），通过过滤函数运行数组以确保仅传递数组类型值，将数组数组扁平化为单个数组，然后映射。

{[rows, rows2]
  .filter(Array.isArray)
  .flat()
  .map((row) => (
    <TableRow
      key={row.name}
      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
    >
      <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>
  ))}

【讨论】：

谢谢。例如，如何将rowsfat 列的背景颜色设置为绿色？
@Joseph 您可以创建样式化组件，请参阅更新的沙箱链接。我只是从文档中的一个表格示例中借用的，但是您可以对样式更加感兴趣。
谢谢德鲁。但我想只适用于身体，也适用于rows 而不是rows2 如果rows2 有数据
@Joseph 如果您不想，您不需要为 tableCellClasses.head 头类指定任何样式。因此，如果数据来自 rows 数组，您只想设置单元格样式？
是的，如果来自 rows 数组仅。

【解决方案2】：

您可以使用下面的result 语法。只需将地图回调函数替换为您想要的任何内容：

const rows = [
  {
    name: "frozen yogurt",
    calories: 22,
    fat: 33,
    carbs: 44,
    protein: 44
  },
  // ...
];

const rows2 = "none";

const result = [...(Array.isArray(rows) ? rows : []), ...(Array.isArray(rows2) ? rows2 : [])]
  .map(row => /* whatever you want here, but I'll use */ row);

console.log(result);

或者你可以制作一个函数并重新使用它：

function arrayValueOrEmptyArray (value) {
  return Array.isArray(value) ? value : [];
}

const rows = [
  {
    name: "frozen yogurt",
    calories: 22,
    fat: 33,
    carbs: 44,
    protein: 44
  },
  // ...
];

const rows2 = "none";

const result = [...arrayValueOrEmptyArray(rows), ...arrayValueOrEmptyArray(rows2)].map(row => row);

console.log(result);

【讨论】：