将列的顺序保存在本地存储中

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: {}}

我正在尝试调整这个问题的答案，除了我没有使用材料表。在items.push(savedColumns[columnIndex]);反应中抛出这个：

错误：对象作为 React 子项无效(找到：具有键 {键、ref、props、_owner、_store} 的对象(。如果要呈现子项集合，请改用数组。

我找不到解决方案。

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

---

我在应用程序中的代码.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并解析它时，它不会抛出错误

我正在添加带有最小可重现代码的链接，如果您想对其进行更改，如果它对您不起作用。因为，我看不到任何handleColumnDrag调用，我觉得您可能会偶然遇到一些您在上面的代码中没有显示的其他问题