如何重新渲染表来反映输入数据

Question

Createrisk.jsx

创造个人风险

• Tablepage.jsx
在MUI数据网格中显示风险

• 问题是tablepage仅呈现createrisk的属性，这些属性不取决于用户输入，即ID和测试属性。我相信这是有道理的，首先渲染与输入相关的属性是空的。
  

  我如何将表页组件重新渲染？理想情况下，与createrisk上的这一事件相关：

<button onClick={handleSubmission}>Store my data</button>

我有一个模糊的想法，我需要一个USESTATE，但是我不确定如何在不同的组件（JSX文件）上执行此操作。

Createrisk.jsx

：

function Createrisk() {
  function handleSubmission() {
    var risks = JSON.parse(localStorage.getItem("allrisks"));
    if (risks == null) {
      risks = [];
    }
    let riskitem = {
      riskname: document.getElementById("rname").value,
      riskdesc: document.getElementById("rdesc").value,
      riskimpact: document.getElementById("rimpact").value,
      test: "test",
    };
    risks.push(riskitem);
    let i = 1;
    risks.map((n) => {
      n["id"] = i;
      i++;
    });

    localStorage.setItem("allrisks", JSON.stringify(risks));
  }

  return (
    <div>
      <input type="text" id="rname" placeholder="Risk Name" />
      <input type="text" id="rdesc" placeholder="Risk Description" />
      <input type="text" id="rimpact" placeholder="Risk Impact" />
      <button onClick={handleSubmission}>Store my data</button>
    </div>
  );
}
export default Createrisk;

Tablepage.jsx

：

function Tablepage() {
  const risksfromstorage = JSON.parse(localStorage.getItem("allrisks"));

  const columns = [
    { field: "id", headerName: "ID", width: 350 },
    { field: "rname", headerName: "Risk Name", width: 350 },
    { field: "rdesc", headerName: "Risk Desc", width: 350 },
    { field: "rimpact", headerName: "Risk Impact", width: 350 },
    { field: "test", headerName: "test", width: 350 },
  ];

  const rows = risksfromstorage.map((row) => ({
    id: row.id,
    rname: row.rname,
    rdesc: row.rdesc,
    rimpact: row.rimpact,
    test: row.test,
  }));

  return (
    <div>
      <DataGrid getRowId={(row) => row.id} columns={columns} rows={rows} />
    </div>
  );
}

export default Tablepage;

可以看到，阵列/对象会添加到localstorage。仅在表（ID＆TEST）

中填充了非输入属性

IMG展示表和localstorage

看来，存储在localstorage中的数据值是您的真实源。与其尝试直接与localstorage合作，不如在共同祖先组件中创建一个状态，该状态是从localstorage初始化的，并将状态传递给了这两个组件。

示例：

"allrisks"

createrisk.jsx

Answer 1

const CommonAncestor = () => {
  // Lazy initialize state from localStorage
  const [allRisks, setAllRisks] = React.useState(() => {
    return JSON.parse(localStorage.getItem("allrisks")) || [];
  });

  // Side-effect to persist state to localStorage
  React.useEffect(() => {
    localStorage.setItem("allrisks", JSON.stringify(allRisks));
  }, [allRisks]);

  // Handler to update state
  const addRisk = (risk) => {
    setAllRisks(allRisks => allRisks.concat(risk));
  };

  return (
    <>
      ...
      <CreateRisk addRisk={addRisk} />
      ...
      <TablePage rows={allRisks} />
      ...
    </>
  );
};

tablepage.jsx

import { nanoid } from 'nanoid';

function CreateRisk({ addRisk }) {
  function handleSubmission() {
    addRisk({
      id: nanoid(),
      riskname: document.getElementById("rname").value,
      riskdesc: document.getElementById("rdesc").value,
      riskimpact: document.getElementById("rimpact").value,
      test: "test",
    });
  }

  return (
    <div>
      <input type="text" id="rname" placeholder="Risk Name" />
      <input type="text" id="rdesc" placeholder="Risk Description" />
      <input type="text" id="rimpact" placeholder="Risk Impact" />
      <button onClick={handleSubmission}>Store my data</button>
    </div>
  );
}