React类组件componentDidMount内setState不生效问题求解

问题根源分析 #

你代码里的核心错误有两个：

1. render中错误访问状态：直接使用this.postAuthRuleSets，但状态是存储在this.state中的，因此始终拿不到setState更新后的值，一直为null。
2. 多次不必要的setState调用：在componentDidMount里循环触发setState，每次遍历都更新状态，不仅性能低下，还可能引发更新顺序问题。

修复方案 #

• 修正状态访问路径：所有需要使用的状态必须从this.state中获取，比如把this.postAuthRuleSets改为this.state.postAuthRuleSets。
• 一次性更新状态：先遍历ruleSets筛选出对应phase的数据，再一次性调用setState完成状态更新，避免多次触发组件重渲染。
• 完善空值防御：在render时先判断状态是否为null，再进行后续的属性访问和遍历操作。

修复后的完整代码 #

import ruleSets from './db.json'
class App extends React.Component{
  componentDidMount(){
    // 筛选对应phase的数据，一次性更新状态
    const postAuthData = ruleSets.find(element => element.phase === "post_auth");
    const preAuthData = ruleSets.find(element => element.phase === "pre_auth");
    
    this.setState({
      postAuthRuleSets: postAuthData,
      preAuthRuleSets: preAuthData
    });
  }

  constructor(props,context){
    super(props,context);
    this.state={
      postAuthRuleSets:null,
      preAuthRuleSets:null
    }
  }

  render(){
    const { postAuthRuleSets } = this.state;
    return(
      <div>
        <h1>hello</h1>
        {/* 先判断状态是否存在，再处理列表渲染 */}
        {postAuthRuleSets?.rules?.length > 0 ? 
          postAuthRuleSets.rules.map((element) => <h1 key={element.id}> {element.id}</h1>) :
          <h1>not fetching data</h1>}
      </div>
    )
  }
}
export default App;

补充说明 #

• 使用find替代map：因为你需要的是对应phase的单个元素，map是遍历所有元素并返回新数组，不符合需求。
• 添加key属性：列表渲染时必须添加唯一key，符合React规范，避免控制台警告。
• 可选链操作符?.：确保状态为null或属性不存在时不会抛出错误。

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