React：componentDidMount非回调中setState是否合规？附代码咨询

嘿，我来帮你理清楚这个问题～首先要澄清一个常见的误解：componentDidMount里直接调用setState并不是完全不允许的，只是大多数情况下我们没必要这么做，但在你的场景下，这种写法是完全合理且安全的。

为什么你的代码没问题？ #

在componentDidMount生命周期钩子中，组件已经完成了首次渲染，此时调用setState会触发一次额外的更新，但React内部会自动合并这两次渲染操作，不会带来明显的性能损耗。

你的代码是在同步解析URL搜索参数后设置状态，这种场景非常常见——很多时候我们需要从URL参数中获取初始化的组件状态，这么做完全符合React的设计逻辑。

可以优化一下你的代码 #

你当前循环解析参数的写法有点繁琐，可以用URLSearchParams提供的get方法简化：

componentDidMount() {
  const query = new URLSearchParams(this.props.location.search);
  // 如果url中没有price参数，默认设为0
  const price = query.get('price') || 0;
  this.setState({ price });
}

关于后续的条件渲染 #

只要你正确设置了state.price，基于这个状态的条件渲染会正常工作。因为setState会触发组件的重新渲染，组件会使用更新后的状态来生成新的UI。

总结一下：你现在的写法是没问题的，放心用就好～

内容的提问来源于stack exchange，提问作者Jason Athanasoglou