对象没有被传递到本地存储 - React JS答案

【问题标题】：Objects not getting passed into localstorage - React JS对象没有被传递到本地存储 - React JS
【发布时间】：2021-06-18 10:27:06
【问题描述】：

所以我正在尝试制作一个 Web 应用程序，它从后端 API 获取数据并将其显示到前端（这可行）并且还具有添加到购物车的功能。我正在尝试将请求的项目存储到本地存储中并使用状态，当用户单击添加到购物车时，它应该将项目或对象存储在他们的本地存储中。当我单击添加到购物车时，它会被添加 cartItems [object Object]（这不是可点击的），这不是我想要的。我想将实际对象存储在本地存储中。

import { Card, Button } from 'react-bootstrap'
import axios from 'axios'


function HomeScreen() {
    const [products, setProducts] = useState([])
    const [cart, setCart] = useState([])
    function handleClick(id) {
        const chosen_product = axios.get(`http://localhost:8000/api/products/${id}`)
        setCart(cart + {chosen_product})
        localStorage.setItem("cartItems", cart)
    }
    useEffect(() => {
        async function getProducts() {
            try {
              const response = await axios.get('http://localhost:8000/api/products/');
              setProducts(response.data);
            } catch (error) {
              console.error(error);
            }
          }
       getProducts()
    },[])
    return (
        <div>
            {products.map(product => (
                <Card className="my-3 p-3 rounded" key={product.id}>
            <Card.Img src={'http://localhost:8000' + product.image} />
            <Card.Body>
            <Card.Title as="div">
                <strong>{product.name}</strong>
            </Card.Title>
            <Card.Text as="div">
            
            </Card.Text>
            <Card.Text as="h3">
            ${product.price}
            </Card.Text>
            <Card.Link>
                <Button onClick={()=>handleClick(product.id)} className="btn-primary">Add to cart</Button>
            </Card.Link>
            </Card.Body>
        </Card>
            ))}
        </div>
    )
}

export default HomeScreen

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您需要将内容作为字符串存储在 localStorage 中。你还需要等待 API 响应，axios.get 返回一个 Promise。

async function handleClick(id) {
  try {
    const chosen_product = await axios.get(`http://localhost:8000/api/products/${id}`)
    setCart(cart + {chosen_product}) // This is wrong, can't add array to object
    localStorage.setItem("cartItems", JSON.stringify(cart)) // This is wrong, cart will still be the previous value
  } catch (err) {
    console.error(err)
  }
}

事实上你已经在 getProducts 中拥有了这个代码结构...

这段代码也没有意义：

setCart(cart + {chosen_product})

您不能将对象添加到数组中。

另外，在setCart 之后直接设置cart 将不起作用，此时cart 仍将是您以前的值，最简单的解决方案是为您的新状态创建一个变量。

const newCart = cart.concat(chosen_product);
setCart(newCart);
localStorage.setItem("cartItems", JSON.stringify(newCart));

【讨论】：

【解决方案2】：

你需要对对象进行字符串化，因为

localStorage.setItem("cartItems", JSON.stringify(cart))

您可以使用 JSON.parse 再次将项目解析为 js 对象

JSON.parse(localStorage.getItem('cartItems'))

【讨论】：

【解决方案3】：

你需要在字符串化之后存储对象值。

storage.setItem(keyName, keyValue);

键名包含您要创建/更新的密钥名称的 DOMString。

键值一个 DOMString，其中包含您要为正在创建/更新的键提供的值。

存储：

localStorage.setItem("cartItems", JSON.stringify(cart))

检索：

const val = JSON.parse(localStorage.getItem("cartItems"))

【讨论】：

【解决方案4】：

你需要像这样将对象变成一个 JSON 字符串：

localStorage.setItem("cartItems", JSON.stringify(cart))

然后您可以像这样获取项目并对其进行解析：

JSON.parse(localStorage.getItem("cartItems"))

你又回到了一个 Javascript 对象。

【讨论】：