我有一个组件,我想要获取URL参数(例如,a1和a2)。如果这些包含任何内容,我想将一些本地状态设置为它们的值,以便可以在页面上呈现内容。我使用react-router-dom
和withRouter
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中弃用的方法,因为这只是意味着在升级时重写它...
答案 0 :(得分:1)
是否有特殊原因要将这些值存储在状态中?
你说它是"因此可以在页面上呈现内容"
但是,您不需要使用该状态。在render()
中,您可以访问和使用this.props
。
答案 1 :(得分:-1)
您应该使用componentWillMount
方法。它将是预备设置,一旦设置了状态,您的组件就可以正常渲染,而不像componentDidMount
中的重新渲染。
如果由于将来弃用而不想使用componentWillMount
(UNSAFE_
即使在React 17之后仍然有效),您也可以在constructor
中设置url参数本身,因为这是恒定的价值,根本不会改变。