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

Question

我有一个想要获取 URL 参数的组件（例如，a1 和 a2）。如果这些包含任何内容，我想将一些本地状态设置为它们的值，以便可以在页面上呈现内容。我正在使用react-router-dom 和withRouter HOC，所以我可以从props 访问location，但我不确定我是否可以使用它。现在我有：

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 的 ESLint 警告。我已经进行了一些搜索，这在来自componentDidMount 的回调中显然是“可以”做的，但这不是回调，所以我不确定它是否“可以”。

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

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

Answer 1

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

你说它是“这样可以在页面上呈现东西”

但是，您不需要为此使用状态。在render()，您可以访问和使用this.props。

Answer 2

您应该改用componentWillMount 方法。这将是准备性设置，一旦设置了状态，您的组件就可以正常渲染，不像 componentDidMount 的情况下重新渲染。

如果你不想使用 componentWillMount 因为将来会被弃用（UNSAFE_ 即使在 React 17 之后仍然有效），你也可以在 constructor 本身中设置 url 参数，因为这是常量值并且根本不改变。