如何使用reactJs和reactHooks將資料存盤和填充到dataGrid或table中？

我試圖從表單中獲取用戶輸入資料并將其顯示在下面的表格/資料網格中。但我沒有得到正確的輸出。

請看下面的流程

當用戶提交表單并單擊立即發送按鈕時，{handlSubmit}函式會觸發并將值存盤在useState hooks(values) 中。然后我試圖檢索相同的值并將其填充到下面的 Datagrid 中。

請在底部提供的沙盒鏈接上查看完整的源代碼。任何幫助或建議都非常感謝，并在此先感謝。

請參閱下圖以獲取當前階段的參考和輸出。

注意：Datagrid 組件中的 rows 屬性只接受陣列型別。

源代碼：

import React, { useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box, Button, Divider, Paper, Stack, TextField } from "@mui/material";

const Send = () => {
  const [values, setValues] = useState({
    addressTo: "",
    amount: "",
    message: ""
  });

  const [storeData, setStoreData] = useState([]);
  const handleChange = (e) => {
    e.preventDefault();
    setValues((values) => ({
      ...values,
      [e.target.name]: e.target.value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(values);
    setStoreData(Object.values(values));
  };

  const columns = [
    { field: "id", headerName: "ID", width: 70, align: "left", flex: 4 },
    {
      field: "AddressTo",
      headerName: "Address To",
      width: 130,
      align: "left",
      flex: 4
    },
    {
      field: "Amount",
      headerName: "Amount (in Eth)",
      width: 130,
      align: "left",
      flex: 4
    },
    {
      field: "Message",
      headerName: "Message",
      type: "text",
      width: 90,
      align: "left",
      flex: 4
    }
  ];

  const newId = new Date();
  const rows = storeData?.map((row) => ({
    id: newId.toISOString(),
    Amount: `${row.amount}`,
    AddressTo: `${row.addressTo}`,
    Message: `${row.message}`
  }));
  return (
    <>
      <Box className="frominputs">
        <form onSubmit={handleSubmit}>
          <TextField
            name="addressTo"
            value={values.addressTo}
            onChange={handleChange}
            required
            fullWidth
            margin="dense"
            id="outlined-addressTo-input"
            placeholder="Address To"
            type="text"
          />
          <TextField
            name="amount"
            value={values.amount}
            onChange={handleChange}
            required
            fullWidth
            margin="dense"
            id="outlined-amount-input"
            placeholder="Amount in Eth"
            type="number"
          />
          <TextField
            name="message"
            value={values.message}
            onChange={handleChange}
            required
            fullWidth
            margin="dense"
            id="outlined-message-input"
            placeholder="Message"
            type="text"
          />

          <Divider
            sx={{
              background: "white",
              opacity: "0.7",
              marginTop: "5%",
              marginBottom: "5%"
            }}
          />
          <Button
            color="inherit"
            sx={{ border: "1px solid white", width: "100%", height: "45px" }}
            type="submit"
          >
            Send Now
          </Button>
        </form>
      </Box>

      <Box className="datatable" sx={{ height: 363 }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          rowsPerPageOptions={[5]}
          disableSelectionOnClick={true}
          sx={{ m: 2, width: "100%" }}
        />
      </Box>
    </>
  );
};

export default Send;

點擊查看演示和源代碼

uj5u.com熱心網友回復：

您正在嘗試映射串列，但未設定為掛鉤values中的串列。StoreData下面的handleSubmit功能應該修復它

  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(values);
    setStoreData([...storeData, values]);
  };

uj5u.com熱心網友回復：

我檢查了代碼有多個錯誤，我在這個 fork 中修復了它們：https ://codesandbox.io/s/sencrypapp-forked-kon8qh?file=/src/Send.jsx

大多數都與型別化問題有關，所以也許 TS 對你來說是一個很好的工具。您提供的 ID 與所有專案的 ID 相同，我將 ID 更改為數字以便它作業，如果您想要日期 ID，您應該將其添加到 handleSubmit 方法中的資料中。

標籤：javascript 数组 反应 反应钩子 材料-ui

上一篇：如果條件為真，如何查找和替換值陣列項

下一篇：遞回回傳必要的值-Javascript