反应和JSON问题。如何将输入到表单中的数据保存到JSON中？

Question

我目前正在学习，反应和创建一个模拟网站，以便我可以学习，因为你建立。

该网站非常简单，它向用户提供有关动物的信息，他们可以在动物园找到。

在其中一个页面中，用户可以添加有关动物的新信息。

下面是那一页的代码。

Input.js

> import React, { useState } from "react";
import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap";
import data from "../Components/data.json"


export const InputForm = props => {

    const {updateDetailsArray} = props;
    
    const initialInputState = { Species: "", Facts: "" };
   

    const [eachEntry, setEachEntry] = useState(initialInputState);

    const {Species, Facts} = eachEntry;

      
    const handleInputChange = e => {
        setEachEntry({...eachEntry,[e.target.name]: e.target.value});
    };

    const handleFinalSubmit = e => {
        updateDetailsArray(eachEntry)
    };

  return (
  <div>
    <Row>
      <Col sm="12" md={{ size: 6, offset: 3 }} className="text-center">
        <h2>Add Animal</h2>
      </Col>
    </Row>
    <Row className="mt-4">
      <Col sm="12" md={{ size: 6, offset: 3 }}>
        <Form>
          <FormGroup>
            <Label for="Species">Species</Label>
            <Input name="Species" 
            placeholder="What kind of animal is it?"
            onChange={handleInputChange}
            value={Species}
            ></Input>
          </FormGroup>
          <FormGroup>
            <Label for="Facts">Facts</Label>
            <Input name="Facts" 
            placeholder="Enter animal details"
            onChange={handleInputChange}
            value={Facts}
            ></Input>
          </FormGroup>
          <Button onClick={handleFinalSubmit}>Submit</Button>
        </Form>
      </Col>
    </Row>
  </div> 
  );
};

Output.js

import React from "react";
import { Row, Col, Table } from "reactstrap";


export const Outputsubmitted = props => {
const {details} = props;

  return (
    <div className="mt-4">
    <Row>
      <Col sm="12" md={{ size: 16, offset: 300 }}>
        <Table hover>
          <thead>
            <tr>
              {/* <tr> is row */}
              <th>#</th>
              <th>Species</th>
              <th>Facts</th>
              {/* <th> create the header in the row. <Td> normal data in rows */}
            </tr>
          </thead>
          <tbody>
            <RenderTableData details={details} />
          </tbody>
        </Table>
      </Col>
    </Row>
  </div>
);
};
const RenderTableData = props => {
  const { details } = props;
  var count = 0;
  // starting number 0 for #.
  const finalArray = details.sort((a, b) => b.score - a.score);
  // .sort will organize data alphabetically or ascending order. 
  return Object.keys(finalArray).map((i, o) => {
    // Object.keys = displays keys of the object. E.g Name:Kiro(keys=Name)
    // .map will add a  function to the element and display its results. 
    const { Species, Facts } = finalArray[i];
    count = count + 1;
    return (
      <tr key={count.toString(10)}>
        <th scope="row">{count.toString(10)}</th>
        <td>{Species}</td>
        <td>{Facts}</td>
      </tr>
    );
  });
};

最后显示这两个文件。Addnew.js

import {useState} from 'react';
import {InputForm} from './Input';
import {Outputsubmitted} from './Output'


function App() {
    // This usestate will pass on data from parent component(app.js) to child components.
    const [details, setdetails] = useState([]);
    
    const updateDetailsArray = eachEntry => {
      setdetails([...details, eachEntry]);
    };
    return (
      <div className="container mt-4">
          <InputForm updateDetailsArray={updateDetailsArray} />
          <Outputsubmitted details={details} />
        </div>
      );
    }
    export default App;
    
    // updateDetailsArray is a props used in Sumbit button(to pull the newly added data written in eachEntry) and Inputform (to pass the data to 
    // the inputForm(childcomponent)). 

当NPM启动它时，这就是添加新页面的结果。输入的数据被保存在右侧的圆圈区域，但是当我刷新时，它就消失了。

经过一些研究，发现您需要使用JSON永久保存它。你能告诉我怎么做吗？

Answer 1

当您重新加载网站时，您保存的信息就会消失，因为它们不是保存在永久内存或文件中，而是保存在每次刷新浏览器时都会被擦除的浏览器缓存内存中。

要做你想要达到的目标，你有很多选择：

1.可以将数据保存到浏览器本地存储中。

本地存储是浏览器中可以保存数据的地方。

将数据保存到本地存储如下所示：

localStorage.setItem('details', 'Some details');

从本地存储中获取数据如下所示：

localStorage.getItem('details');

本地存储仅保存字符串值，因此，如果要将数组或对象保存到该数组或对象，必须先对其进行字符串化( stringify只是将数组转换为string)，如下所示：

const arr = [1, 2, 3]
localStorage.setItem("arr", JSON.stringify(arr));

以上代码将将arr数组保存到浏览器的本地存储区，作为字符串值，如下所示："1,2,3“

如果想要拿回数组的值，可以简单地解析字符串值(解析只是将本地存储字符串值转换为字符串前的任何值，比如数组或对象)。

arr = JSON.parse(localStorage.getItem("arr"));

您可以在代码中实现上面的内容，如下所示:在文件Addnew.js中

import {useState} from 'react';
import {InputForm} from './Input';
import {Outputsubmitted} from './Output'


function App() {
    if (localStorage.getItem("details") == null) {
       localStorage.setItem("details", JSON.stringify([]))
    }
    const [details, setdetails] = useState(JSON.parse(localStorage.getItem("details")));
    
    const updateDetailsArray = eachEntry => {
      setdetails([...details, eachEntry]);
      localStorage.setItem("details", JSON.stringify([...details, eachEntry]))
    };
    return (
      <div className="container mt-4">
          <InputForm updateDetailsArray={updateDetailsArray} />
          <Outputsubmitted details={details} />
        </div>
      );
    }
    export default App;

本地存储的最大缺点是，如果用户从另一个浏览器打开站点，甚至清除缓存，那么所有数据都会被擦除，所以要小心，不要在其中存储关键数据，因为您可以通过在chrome工具中打开应用程序点击并选择local来查看本地存储中的内容。

2.您可以将数据保存到数据库中，您可以将数据保存到您选择的数据库中，例如MongoDB或MySQL，并将您的头脑从所有麻烦中解脱出来。

2.您可以将数据保存到本地JSON文件中进行此功能，您需要有一个后端来使用像文件系统(fs)模块这样的模块来处理JSON文件，您可以从这里了解更多关于它的信息：https://stackoverflow.com/a/36869835/15075805