If陳述句內映射

我目前有一個 DataGrid 正在呈現從我的后端 mongoDB 中抓取的資料。資料渲染映射到 mongoDB 檔案中的物件指定的鍵。在每個檔案中都有一組布林值，我試圖檢查這些值是否為真，如果它們為真，它將在每一行的 repairsNeeded 列中呈現 Y，如果不是，它將呈現 N。我遇到的主要問題是在哪里/如何檢查這個。我玩了幾個不同的想法都無濟于事。現在，我將每一行的 repairsNeeded 列分配給 document.isPowerCordDamaged （我的布林值之一），它根據是否選中而呈現真或假。

代碼：

function Rounding() {
  const [cartsRounded, setCartsRounded] = useState([]);

  let navigate = useNavigate();

  useEffect(() => {
    userCartsRounded()
      .then((response) => {
        setCartsRounded(response.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const columns = [
    {
      field: "serialNum",
      headerName: "Cart Serial Number",
      width: 250,
    },
    {
      field: "pcNum",
      headerName: "Workstation Number",
      width: 250,
    },
    {
      field: "dateLastRounded",
      headerName: "Last Rounded On",
      width: 250,
    },
    {
      field: "repairsNeeded",
      headerName: "Repairs?",
      width: 100,
    },
    {
      field: "quarter",
      headerName: "Quarter",
      width: 75,
    },
  ];

  const [sortModel, setSortModel] = React.useState([
    {
      field: "dateLastRounded",
      sort: "desc",
    },
  ]);

  const rows = useMemo(
    () =>
      cartsRounded.map((row, index) => ({
        ...row,
        id: index,
        serialNum: row.cartSerialNumber,
        pcNum: row.pcNumber,
        dateLastRounded: moment(row.updatedAt).format("MM-D-YYYY"),
        repairsNeeded: row.isPowerCordDamaged,
        quarter: moment(row.updatedAt).format("Qo"),
      })),
    [cartsRounded]
  );

  return (
    <div>
      <IconButton
        color="primary"
        aria-label="new rounding"
        component="span"
        onClick={() => {
          navigate("add_new_cart");
        }}
      >
        <AddCircleOutline />
      </IconButton>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          component={Paper}
          rows={rows}
          columns={columns}
          sortModel={sortModel}
          pageSize={100}
          rowsPerPageOptions={[100]}
        />
      </div>
    </div>
  );
}

export default Rounding;

檔案示例：

  {
    _id: new ObjectId("61b95e447aec51d938e856cc"),
    cartSerialNumber: 'testytitit',
    pcNumber: '14124f0sdf0sfs',
    isPowerCordDamaged: false,
    isFuseBlown: false,
    isInverterBad: false,
    isInterfaceDamaged: false,
    isPhysicalDamage: false,
    otherNotes: '',
    roundedBy: '6186c13beb18d33d5088f7b2',
    createdAt: 2021-12-15T03:17:24.495Z,
    updatedAt: 2021-12-15T03:17:24.495Z,
    __v: 0
  }

uj5u.com熱心網友回復：

我可能不理解這里的問題。但我認為您要做的是讓 repairsNeeded 欄位具有 Y 或 N 而不是其布林值。

試試這個。

const rows = useMemo(
    () =>
      cartsRounded.map((row, index) => ({
        ...row,
        id: index,
        serialNum: row.cartSerialNumber,
        pcNum: row.pcNumber,
        dateLastRounded: moment(row.updatedAt).format("MM-D-YYYY"),
        repairsNeeded: row.isPowerCordDamaged ? "Y" : "N" // short hand for if (row.isPowerCordDamaged === true) return "Y" else return "N",
        quarter: moment(row.updatedAt).format("Qo"),
      })),
    [cartsRounded]
  );

查看之后，如果有的話，您可能想回傳 Y 或 N 嗎？在這種情況下，最好將其拉入一個函式中。

const isRepairNeeded = (row) => {

  if (row.isPowerCordDamaged) return "Y";
  if (row.isFuseBlown) return "Y";
  ... rest of the ifs
  return "N"; // N is only returned if none of the if statements === true;
}

const rows = useMemo(
    () =>
      cartsRounded.map((row, index) => ({
        ...row,
        id: index,
        serialNum: row.cartSerialNumber,
        pcNum: row.pcNumber,
        dateLastRounded: moment(row.updatedAt).format("MM-D-YYYY"),
        repairsNeeded: isRepairNeeded(row) // call the function will return "Y" or "N",
        quarter: moment(row.updatedAt).format("Qo"),
      })),
    [cartsRounded]
  );

標籤：反应 MongoDB 数据网格 材质-ui

上一篇：Pymongo-在mongodb副本集中查找主/主節點名稱

下一篇：在集成測驗期間使用嵌入式mongo連接bean