时间戳

首页 > 解决方案 > 使用 React 的本地存储的巨大问题

javascript - 使用 React 的本地存储的巨大问题

问题描述

目标：我正在尝试使用带有 React 的本地存储来持久化数据。

方法：这是我使用本地存储存储数据的方法。首先，我有第一个 useEffect 触发 localStorage 来存储一个项目数组，这些项目是复选框。每次用户添加新的待办事项复选框时都会发生这种情况。其次，我还有另一个 useEffect 监听页面的当前位置。每当用户导航到另一个页面并返回当前页面时，useEffect 将触发 localStorage.get('tasks') 并将数组中的对象存储到名为 setToDo 的钩子中。这将呈现以前使用本地存储存储的项目。

问题：我一直遇到的问题是，即使我尝试使用数组解构将数组中的所有对象从 localStorage.get('tasks') 附加到“toDo”钩子，对象作为 React 子对象也是无效的。前任。setToDo(prevItems=> [...prevItems, ...value] 在第二个 useEffect 中。这应该能够使用代码中显示的 map 函数呈现数组中的对象列表。此外，localStorage 中的项目是被存储是因为我用 Chrome 检查了它。请帮助我，因为我一直在苦苦挣扎，并尝试了所有可能的解决方案，但没有结果。

错误消息的图像 https://imgur.com/a/571wI1a 快速注意：图像中显示的 item_value 包含一个名为 PriorityLists 的组件，它呈现一个带有 textarea 的复选框，如下所示-> https://imgur.com/a /ToD6uUa

代码这段代码应该足以解决问题。

import React, { useState, useEffect } from 'react';
import { Delete, Refresh, Add } from '../components/Actions';
import { Header } from '../components/Header';
import { PriorityLists } from '../components/PriorityLists';
import { v4 as uuidv4 } from 'uuid';

function Task() {
  const [toDo, setToDo] = useState([]);
  const [idsToRefresh, setIdsToRefresh] = useState([]);
  const [filter_items, setFilterItems] = useState(false);
  const [ids, setIds] = useState([]);

  const [currentPath, setCurrentPath] = useState(window.location.pathname);
  useEffect(() => {
    if (toDo[0] !== undefined) {
      localStorage.setItem('tasks', JSON.stringify(toDo));
    }
  }, [toDo]);

  useEffect(() => {
    const { pathname } = window.location;
    console.log('path');
    setCurrentPath(pathname);
    if (JSON.parse(localStorage.getItem('tasks'))) {
      const value = JSON.parse(localStorage.getItem('tasks'));
      setToDo((prevItems) => [...prevItems, ...value]);
      console.log(value);
    }
  }, [window.location.pathname]);

  useEffect(() => {
    if (toDo[0] !== undefined) {
      setToDo(
        toDo.filter((item) => {
          return !ids.includes(item._Id);
        })
      );
    }
  }, [filter_items]);

  function addIds(checked, id_to_be_deleted) {
    if (!checked) {
      setIds((item) => [...item, id_to_be_deleted]);
    } else {
      setIds(
        ids.filter((item) => {
          return item !== id_to_be_deleted;
        })
      );
    }
  }

  function addToDos() {
    const id = uuidv4();

    setToDo(
      toDo.concat({
        _Id: id,
        item_value: <PriorityLists id={id} checked={false} addIds={addIds} />,
      })
    );
    setIdsToRefresh(idsToRefresh.concat(id));
  }

  function refresh() {
    setToDo(
      toDo.filter((item) => {
        return !idsToRefresh.includes(item._Id);
      })
    );
  }

  return (
    <div className="main-content">
      <div className="container-fluid">
        <div className="row underline">
          <div className="col">
            <div className="row">
              <div className="col-3 pt-2">
                <Refresh _refresh={refresh} />
              </div>

              <div className="col-6 text-center">
                <Header header={'Tasks'} />
              </div>

              <div className="col-3 pt-2">
                <button className="float-right">
                  <Delete
                    setFilterItems={setFilterItems}
                    filter={filter_items}
                  />
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col">
            {toDo.map((item) => {
              return (
                <div key={item._Id}>
                  <ul>
                    <li>{item.item_value}</li>
                  </ul>
                </div>
              );
            })}
          </div>
        </div>

        <div className="row">
          <div className="col pr-4">
            <Add addToDos={addToDos} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Task;

标签： javascriptreactjslocal-storage

解决方案

再次检查错误消息和有问题的行：

行：<li>{item.item_value}</li> 错误：Objects are not valid as React child.

查看您的屏幕截图item_value是一个解构的 JSX：

<PriorityLists id = {id} checked = {false} addIds = {addIds} />

你需要任务列表来保存简单的对象，这样你就可以让 React 渲染它们，例如：

<li><PriorityLists id={item.id} checked={item.checked} addIds={this.addIds} />

React 会说，只要你做一些简单的事情，就<>{object}</>好像你的对象是按预期构造的那样，那么你需要提取你想要的属性，例如<>{object.title}</>.

我希望能指导您找到正确的解决方案。

推荐阅读