在React组件安装上获取URL参数的正确方法？

Question

I have a component for which I want to get URL params (say, a1 and a2). If these contain anything, I want to set some local state to their values so things can be rendered on the page. I'm using react-router-dom and the withRouter HOC, so I can access location from props , but I'm not sure if I can use that. Right now I have:

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,
    })
  }
}

Now, doing this gives me an ESLint warning for Do not use SetState in ComponentDidMount . I've done some searching and that's apparently 'ok' to do in a callback from componentDidMount , but this isn't a callback, so I'm not sure if it's 'ok'.

So what's the right thing to do here? Do I ignore the warning (and get the double-render)? Is there some other way to properly get URL params and set them to local state?

I also don't want to use any methods that will be deprecated in React 17, since that just means re-writing it on upgrade...

Answer 1

Is there a particular reason why you are storing these values in the state?

You said it was "so things can be rendered on the page"

However, you don't need to use the state for that. In render() , you can access and use this.props .

Answer 2

You should use componentWillMount method instead. It'll be preparatory setup and once state is set, your component can render normally, unlike re-render in case of componentDidMount .

In case you don't want to use componentWillMount because of deprecation in future ( UNSAFE_ is still valid even after React 17 though), you can also set url params in constructor itself, as this are constant value and do not change at all.