时间戳

首页 > 解决方案 > 对存储在本地存储中的组件的引用在刷新时未定义

javascript - 对存储在本地存储中的组件的引用在刷新时未定义

问题描述

我有一个组件Widget，它引用一个 Component 类及其属性作为道具并呈现它。

这个小部件是从一个组件渲染的，该WidgetList组件映射到它存储在其状态中的小部件列表，并保持列表更新，localStorage以便它可以在重新加载时保持不变。

class WidgetList extends React.Component {
  constructor(props) {
    super(props);
    const storedWidgets = JSON.parse(localStorage.getItem('widgets')) || null;
    this.state = {
      widgets: storedWidgets
    }
  }

  onChange(updatedWidgets) {
    localStorage.setItem('widgets', JSON.stringify(updatedWidgets));
    this.setState({ widgets: updatedWidgets });
  }

  render() {
    <div>
      {widgets.map(widget => (
          <div key={widget.id}>
            <Widget data={widget.data} />
          </div>
        ))}
    </div>
  }
}


const Widget = (props) => {
  const { component: Component, properties } = props.data;
  console.log(Component, properties)
  return <Component {...properties} />;
};

问题是，当我渲染它时，它工作正常，但刷新时失败。以及 的console.log返回undefined和Component正确的对象properties。

我认为问题在于该组件没有被重新导入，但我不明白如何解决这个问题。

标签： javascriptreactjs

解决方案

updatedWidgets应该是一个包含反应组件的对象。问题是反应组件无法正确序列化JSON.stringify并存储在localStorage

反应组件可以是一个类或函数，它们都不能与JSON.stringify

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

由于你不能JSON.stringify函数或类，字符串是唯一可行的选择，想出在字符串和反应组件之间建立映射的方法，将字符串保存在 localStorage 并稍后转换回反应组件

就像是

const widgeMapping = {
    widget1: function () {
        return <div>widge functional component</div>
    },
    widget2: class extends Component {
        render() {
            return <div>widge class component</div>
        }
    }
}

const localStorageData = JSON.stringify({ component: 'widget', properties: { hello: 'world' } })
const parsedData = JSON.parse(localStorageData)
parsedData.component = widgeMapping(parsedData.component)

推荐阅读