为什么即使在解析后我在 localStorage 中也得到一个空值？答案

【问题标题】：Why am I getting a null value in localStorage even after parsing it?为什么即使在解析后我在 localStorage 中也得到一个空值？
【发布时间】：2021-08-11 22:16:00
【问题描述】：

我正在尝试构建一个加密跟踪器，您可以在其中通过单击按钮添加项目。每次单击按钮时，都应将数组添加到名称为“crypto”的存储中，然后在另一个组件上，它是我们应该能够获取项目的投资组合。

每当我单击添加按钮时，我都会在此处将项目设置为数组：

import React, {useEffect, useState} from 'react'
import axios from 'axios'
import './tracker.css'
import Navigation from './Nav.js'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function Tracker() {
  const [data, setData] = useState([])
  const [portfolio, setPortfolio] = useState([])

  useEffect(() => {
    setInterval(() => {
      const fetchData = async () => {
        const result = await axios('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false' , {
            'mode': 'no-cors',
            'headers': {
                'Access-Control-Allow-Origin': '*',
            }
        })
        setData(result.data)
      }
      fetchData()
    }, 1000)
  }, [])


    return (
        <div>
        <Navigation />
          <div className="tracker__names">
            <b>Coins</b>
            <b>Symbol</b>
            <b>Price</b>
            <b>Market Cap</b>
          </div>
            {data.map((coins, i) => {
              const addToPortfolio = () => {
                setPortfolio([...portfolio, data[i]])

                localStorage.setItem('crpyto', JSON.stringify(portfolio))
              }


                return (
                  <>
                  <div className="tracker__main">
                    <div className="tracker__img">
                        <img src={coins.image} className="tracker__image"/>
                      <button key={i} onClick={addToPortfolio}>{coins.id}</button>
                    </div>
                    <div className="tracker__symbol">
                        <p>{coins.symbol}</p>
                    </div>
                    <div className="tracker__price">
                    <p></p>
                        ${coins.current_price}
                    </div>
                    <div className="tracker__market">
                    <p></p>
                        ${coins.market_cap}
                    </div>
                  </div>
                  </>
                )
            })}
        </div>
    )
}

export default Tracker

这是我要获取项目的组件：

import React, {useState, useEffect} from 'react'
import Navigation from './Nav.js'

function Portfolio() {
  const [value, setValue] = useState(JSON.parse(localStorage.getItem('crypto')) || '')

useEffect(() => {
  console.log(value)
}, )

    return (
        <div>
          <Navigation />
          {value}
        </div>
    )
}

export default Portfolio

【问题讨论】：

会不会是设置项localStorage.setItem('crpyto'...时的错字？
不，项目设置正确
在这里你设置localStorage.setItem('crpyto', JSON.stringify(portfolio))并得到它JSON.parse(localStorage.getItem('crypto'))设置crpyto而不是crypto

标签： reactjs local-storage

【解决方案1】：

这是因为useState在JSON.parse(localStorage.getItem('crypto'))之前执行，一旦你从本地存储中获取值，组件就不会重新渲染。

改为：

useEffect(() => {
  const crypto = JSON.parse(localStorage.getItem('crypto'))
  if(crypto) setValue(crypto)
}, [])

【讨论】：

【解决方案2】：

在 React 中，您不能设置状态变量并在下一行将其保存在 localStorage 中（甚至读取它）。这是因为 setPortfolio 是异步的！

要解决这个问题，我认为有两种方法：

存储值而不是状态变量：

localStorage.setItem('crpyto', JSON.stringify([...portfolio, data[i]]))

使用useEffect 钩子：

useEffect(() => {
   localStorage.setItem('crpyto', JSON.stringify(portfolio))
}, [portfolio])

【讨论】：

【解决方案3】：

首先，当你像这样设置状态时，在下一段代码中，portfolio 不一定会有更新的状态。

setPortfolio([...portfolio, data[i]])

localStorage.setItem('crpyto', JSON.stringify(portfolio))

像这样更新投资组合。

const newPortfolio = [...portfolio, data[i]];

setPortfolio(newPortfolio )

localStorage.setItem('crpyto', JSON.stringify(newPortfolio))

【讨论】：