在 localStorage 中保存列的顺序

Question

我在 React 中使用 react-sortable-hoc 库来创建带有可拖动列的布局。

我需要将用户拖动后的列顺序保存到localStorage，并在页面重新加载后检索它们的顺序。

从状态我可以得到这些列然后做 localStorage.setItem('dragged', JSON.stringify({ items })); 像这样保存我的两列：

0: {key: null, ref: null, props: {}, _owner: null, _store: {}}
1: {key: null, ref: null, props: {}, _owner: null, _store: {}}

我正在尝试调整来自this question 的答案，除非我没有使用材料表。而在 items.push(savedColumns[columnIndex]); 上，react 会抛出这个：

错误：对象作为 React 子对象无效（发现：对象带有键 {key, ref, props, _owner, _store}）。如果您打算渲染一组子项，请改用数组。

我找不到解决办法。

如何正确保存列的顺序并在页面重新加载后呈现？

---

我在 App.js 中的代码

import React, { Component } from 'react';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
import './App.css';
import CircleImage from './components/CircleImage';
import InstaPost from './components/InstaPost';
import Editable from './components/Editable';

const DraggableColumn = sortableElement(({ value }) => <div className="draggable-column">{value}</div>);

const SortableContainer = sortableContainer(({ children }) => {
  return <div className="draggable-container">{children}</div>;
});

class App extends Component {
  state = {
    items: [<CircleImage />, <InstaPost />]
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex)
    }));
  };

  render() {
    const { items } = this.state;

    if (localStorage.getItem('dragged') === null) {
      localStorage.setItem('dragged', JSON.stringify({ items }));
    }
    console.log(items);

    let savedColumns = JSON.parse(localStorage.getItem('dragged'));
    for (var columnIndex in savedColumns) {
      items.push(savedColumns[columnIndex]);
    }

    function handleColumnDrag(sourceIndex, destinationIndex) {
      const sourceColumn = savedColumns[sourceIndex];
      const destinationColumn = savedColumns[destinationIndex];

      // Swapping the column order
      savedColumns[sourceIndex] = destinationColumn;
      savedColumns[destinationIndex] = sourceColumn;
      localStorage.setItem('dragged', JSON.stringify(savedColumns));
    }

    return (
      <div className="App">
        <div className="wrapper">
          <div className="column">
            <Editable />
          </div>
          <SortableContainer onSortEnd={this.onSortEnd} axis="x" lockAxis="x">
            {items.map((value, index) => (
              <DraggableColumn key={`item-${index}`} index={index} value={value} />
            ))}
          </SortableContainer>
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

你为什么要这样做 for (var columnIndex in savedColumns) { items.push(savedColumns[columnIndex]); } 这是完全没有必要的。就做items = savedColumns;

在执行 setItem 时检查 JSON.stringify(item) 中的项目类型是否与 this.state.item 相同。然后当你做一个getItem并解析它时，它不会抛出错误

如果您想在它不适合您的情况下对其进行更改，我将使用Minimal reproducible code 添加此链接。因为，我看不到任何handleColumnDrag 的调用，我觉得您可能会遇到一些您在上面的代码中没有显示的其他问题