Question

我正在使用带有正常React组件（没有React Router）的react-url-query。

这是如此接近工作，但是有一个我无法弄清楚的细节：

当URL具有?skills=beginner->时，将从URL中解析出“ skills”参数，并且组件将this.props.filters.skills正确设置为值['beginner']。这按预期工作。 -这是由mapUrlToProps完成的。（按预期运行）
子组件（FiltersForm）正确获取了从父组件传递下来的filters道具。（按预期运行）
子组件调用onSkillsChange并传递新技能，例如advanced（按预期工作）
然后onSkillsChange被触发，pushInUrlQuery有效，URL中的skills参数被更新为advanced（按预期工作）

这是它的坏处，我希望由于URL的更改，可以识别URL的组件（列表）将使用新的URL重新呈现，并且我会看到mapUrlToProps再次触发并重新设置url的道具，但不是。

URL发生变化，但没有其他反应，List组件的属性保持不变。

我可以看到this.forceUpdate()会在历史记录更改时触发，因此我希望可以像从源仓库中的示例一样更新道具，但不会。

我在这里想念什么？

代码如下：

import React, { Component } from 'react';
import { addUrlProps, UrlQueryParamTypes, configureUrlQuery, pushInUrlQuery, encode } from 'react-url-query'
import createHistory from 'history/createBrowserHistory'
import FiltersForm from './FiltersForm'

const history = createHistory()
configureUrlQuery({ history })

const defaultFilters = { skills: ['beginner', 'intermediate'] }

class List extends Component {
  componentDidMount () {
    history.listen(() => this.forceUpdate())
  }

  render () {
     return <FiltersForm
       filters={this.props.filters}
       onSkillsChange={this.props.onSkillsChange}
     />
  }
}

const mapUrlToProps = (url, props) => {
  const urlFilters = { skills: url.skills ? url.skills.split(',') : [] }
  const filters = Object.assign(defaultFilters, urlFilters)
  return { filters }
}

const mapUrlChangeHandlersToProps = (props) => {
  return {
    onSkillsChange: (value) => {
      pushInUrlQuery('skills', value)
    }
  }
}

export default addUrlProps({ mapUrlToProps, mapUrlChangeHandlersToProps })(List)

没有URL的React URL查询不会在URL更改时更新props

0 个答案: