javascript - 在 React 中使用 localStorage

Question

React 新手。

我有一个带有 2 个输入区域text和number属性的下拉字段。在我设置数据后，它按列表顺序存储它们。检查下面的屏幕截图ADABTC 400 (2020-7-30 7:25:15)

刷新页面后，此字符串消失。如何存储它以便在页面刷新后它会保留？React 中是否有更好的替代方法来存储数据而不是存储数据localStorage？

代码

 import React, { useState, useEffect } from "react";

const assets = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");
  const [dropdown, setDropdown] = useState([]);

  const onChangeSymbol = e => {
    setSymbol(e.target.value);
  };

  const onChangePrice = e => {
    setPrice(e.target.value);
  };

  var today = new Date();
  var date =
    today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
  var time =
    today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date + " " + time;

  const onClick = () => {
    if (symbol !== "" && price !== "") {
      setQueries(queries => {
        return [
          ...queries,
          `${symbol}` + " " + `${price}` + " " + "(" + dateTime+")"
        ];
      });
      setSymbol("");
      setPrice("");
    }
  };

  useEffect(() => {
    if (symbol !== "" && symbol !== assets.find(rec => rec === symbol)) {
      setDropdown(assets.filter(rec => rec.indexOf(symbol) > -1));
    } else {
      setDropdown([]);
    }
  }, [symbol]);

  return (
    <div id="DropDownArea" className="DropDownField">
      <div id="PriceAlertHistory">
        <h6>Price Alert History</h6>
      </div>
      <ul>
        {queries.map(query => (
          <li>{query}</li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={onChangeSymbol}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={onChangePrice}
      />
      <button type="submit" onClick={onClick}>
        Set
      </button>
      <ul>
        {dropdown.length !== 0
          ? dropdown.map(asset => {
              return (
                <li
                  onClick={() => {
                    setSymbol(asset);
                    setDropdown([]);
                  }}
                >
                  {asset}
                </li>
              );
            })
          : false}
      </ul>
    </div>
  );
}

标签： javascriptreactjs

Answer 1

import React, { useState, useEffect } from "react";

const assets = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

export default function App() {
  const [queries, setQueries] = useState(
    JSON.parse(localStorage.getItem("queries")) || []
  );
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");
  const [dropdown, setDropdown] = useState([]);

  const onChangeSymbol = e => {
    setSymbol(e.target.value);
  };

  const onChangePrice = e => {
    setPrice(e.target.value);
  };

  var today = new Date();
  var date =
    today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
  var time =
    today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date + " " + time;

  const onClick = () => {
    if (symbol !== "" && price !== "") {
      setQueries(queries => {
        const query =
          `${symbol}` + " " + `${price}` + " " + "(" + dateTime + ")";
        localStorage.setItem(
          "queries",
          `[${[...queries, query].map(rec => `"${rec}"`)}]`
        );
        return [...queries, query];
      });
      setSymbol("");
      setPrice("");
    }
  };

  useEffect(() => {
    if (symbol !== "" && symbol !== assets.find(rec => rec === symbol)) {
      setDropdown(assets.filter(rec => rec.indexOf(symbol) > -1));
    } else {
      setDropdown([]);
    }
  }, [symbol]);

  return (
    <div id="DropDownArea" className="DropDownField">
      <div id="PriceAlertHistory">
        <h6>Price Alert History</h6>
      </div>
      <ul>
        {queries.map(query => (
          <li>{query}</li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={onChangeSymbol}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={onChangePrice}
      />
      <button type="submit" onClick={onClick}>
        Set
      </button>
      <ul>
        {dropdown.length !== 0
          ? dropdown.map(asset => {
              return (
                <li
                  onClick={() => {
                    setSymbol(asset);
                    setDropdown([]);
                  }}
                >
                  {asset}
                </li>
              );
            })
          : false}
      </ul>
    </div>
  );
}