如何一次执行一行代码，即使在重新渲染和导航时也不会再次执行

Question

我是新手。我被困在一个点上。仅当注释的代码行未被注释时才会加载下面的页面。但随后它会影响代码的功能，因为每次页面呈现时，它都会执行。请让我知道这里出了什么问题，或者我应该采取什么方法来解决它。提前谢谢你。

 function DocumentTable() {
  const data = [{ id: "", name: "", code: "" }];
  const [documentData, setDocumentData] = useState(data);
  // window.localStorage.setItem("document", JSON.stringify(data));  //comment this line.
  let dataForDocumentTableRows = JSON.parse(
    window.localStorage.getItem("document")
  );
  const tableRows = dataForDocumentTableRows.map((info) => {
    return (
      <Tr>
        <Td>{info.id}</Td>
        <Td>{info.name}</Td>
        <Td>{info.code}</Td>
      </Tr>
    );
  });

  const addRows = (data) => {
    const totalDocuments = documentData.length;
    console.log(totalDocuments);
    data.id = totalDocuments;
    const updatedDocumentData = [...documentData];
    console.log(updatedDocumentData);

    updatedDocumentData.push(data);
    setDocumentData(updatedDocumentData);
    window.localStorage.setItem(
      "document",
      JSON.stringify(updatedDocumentData)
    );

    console.log(documentData);
  };

  return (
    <Box>
      <DocumentForm func={addRows} />
      <TableContainer mt={"10vh"}>
        <Box bg={"teal"} fontSize={"30"}>
          <center>Document List </center>
        </Box>
        <Table variant="striped" colorScheme="teal" size="lg">
          <Thead>
            <Tr>
              <Th>Document ID</Th>
              <Th>Document Name</Th>
              <Th>Document Code</Th>
            </Tr>
          </Thead>
          {dataForDocumentTableRows && <Tbody>{tableRows}</Tbody>}
        </Table>
      </TableContainer>
    </Box>
  );
}

export default DocumentTable;

Answer 1

你不能构建它，以便 setItem() 只有在它不存在时才会到达吗？换句话说：如果（不存在）你 setItem()，否则你什么都不做？

如何一次执行一行代码，即使在重新渲染和导航时也不会再次执行

How to execute a line of code once and never again even on re-rendering and navigation

reactjs

local-storage