如何使用 reactJs 和 reactHooks 将数据存储和填充到数据网格或表中？

Question

我正在尝试从表单中获取用户输入数据并将其显示在下面的表/数据网格中。 但我没有得到正确的 output。

请看下面的流程

当用户提交表单并单击立即发送按钮时， {handlSubmit} function 触发并将值存储在useState hooks(values) 中。 然后我试图检索相同的值并将其填充到下面的 Datagrid 中。

请在底部提供的沙盒链接中查看完整的源代码。 非常感谢任何帮助或建议，并提前致谢。

请参阅下图以供参考，output 正在获取当前阶段。

注意：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;

点击查看演示和源码

Answer 1

您正在尝试 map 遍历列表，但未将values设置为StoreData挂钩中的列表。 下面的handleSubmit function 应该修复它

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

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

Answer 2

我检查了代码有多个错误，我在这个 fork 中修复了所有错误： https://codesandbox.io/s/sencrypapp-forked-kon8qh?file=/src/Send.jsx

大多数与打字问题有关，因此 TS 可能是您的好工具。 您提供的 ID 对于所有项目都是相同的 ID，我将 ID 更改为数字以使其有效，如果您想要日期 ID，则应将其添加到 handleSubmit 方法中的数据中。