时间戳

首页 > 解决方案 > 反应保持数据同步

javascript - 反应保持数据同步

问题描述

我在页面上有一个实时过滤器结构。我输入的数据保存在我的状态中，但也作为 URL 查询保存，因此当有人打开带有 URL 中的过滤器的页面时，已经选择了正确的过滤器。

我正在努力寻找一种稳定的方法来保持这两个同步。目前，我在加载时从我的 URL 获取数据，并在我更改状态时在我的 URL 中设置数据，但是这种结构几乎不可能重用所涉及的组件，并且错误很容易导致无限循环，它实际上也是不可能扩大。是否有更好的架构来处理保持这些同步？

标签： javascriptreactjs

解决方案

我建议从查询参数管理视图中过滤器的状态。如果您使用 react-router，您可以使用查询参数而不是状态，并在渲染方法中获取视图元素所需的参数。更改过滤器后，您需要实施重定向。为了更方便，最好使用qs 模块。使用这种方法，您还将收到一个用于请求后端的现成参数。

示例容器：

const initRequestFields = {someFilterByDefault: ''};

class Example extends Component{
  constructor(props) {
    super(props);

    this.lastSearch = '';
  }

  componentDidMount() {
    this.checkQuery();
  }

  componentDidUpdate() {
    this.checkQuery();
  }

  checkQuery() {
    const {location: {search}, history} = this.props;

    if (search) {
      this.getData();
    } else {
      history.replace({path: '/some-route', search: qs.stringify(initRequestFields)});
    }
  }

  getData() {
    const {actionGetData, location: {search}} = this.props;
    const queryString = search || `?${qs.stringify(initRequestFields)}`;
    if (this.lastSearch !== queryString) {
      this.lastSearch = queryString;
      actionGetData(queryString);
    }
  }

  onChangeFilters = (values) => {
    const {history} = this.props;

    history.push({path: '/some-route', search: qs.stringify(values)});
  };

  render() {
    const {location: {search}} = this.props;

    render(<Filters values={qs.parse(search)} onChangeFilers={this.onChangeFilters} />)
  }
}

此逻辑最好保存在将值传递给组件的最高容器中。

获取更多信息：

在反应路由器中查询参数

Qs 模块可轻松处理查询

如果您担心 qs 模块的捆绑大小

推荐阅读