在React组件挂载上获取URL参数的正确方法?

时间:2018-04-23 00:17:52

标签: javascript reactjs react-router-v4 react-router-dom

我有一个组件,我想要获取URL参数(例如,a1和a2)。如果这些包含任何内容,我想将一些本地状态设置为它们的值,以便可以在页面上呈现内容。我使用react-router-domwithRouter HOC,因此我可以从location访问props,但我不确定是否可以使用该class Example extends Component { constructor(props) { super(props); this.state = { a1: null, a2: null, } } componentDidMount() { console.log(window.location.search); const parsed = querystring(window.location.search); this.setState({ a1: parsed.a1, a2: parsed.a2, }) } } 。现在我有:

Do not use SetState in ComponentDidMount

现在,这样做会给我componentDidMount的ESLint警告。我已经做了一些搜索,而且显然已经很好了#39;在{{1}}的回调中进行,但这不是一个回调,所以我不确定它是否正常#。

那么在这里做什么是正确的?我是否忽略警告(并获得双重渲染)?是否有其他方法可以正确获取URL参数并将其设置为本地状态?

我也不想使用任何将在React 17中弃用的方法,因为这只是意味着在升级时重写它...

2 个答案:

答案 0 :(得分:1)

是否有特殊原因要将这些值存储在状态中?

你说它是"因此可以在页面上呈现内容"

但是,您不需要使用该状态。在render()中,您可以访问和使用this.props

答案 1 :(得分:-1)

您应该使用componentWillMount方法。它将是预备设置,一旦设置了状态,您的组件就可以正常渲染,而不像componentDidMount中的重新渲染。

如果由于将来弃用而不想使用componentWillMountUNSAFE_即使在React 17之后仍然有效),您也可以在constructor中设置url参数本身,因为这是恒定的价值,根本不会改变。