React类组件state设为null调用map报错、组件不更新问题咨询

• 调用map报错的原因：React类组件的渲染逻辑执行顺序早于componentDidMount生命周期。初始渲染时this.state.Citys还是你在constructor中设置的null，而null不存在map方法，就会抛出类型错误。
• constructor直接赋值导致页面无响应的原因：country-state-city包的getAllCities()返回全量城市数据，数据量级非常大，constructor是组件初始化的同步执行阶段，在这个阶段执行大量数据获取/计算逻辑，会直接阻塞浏览器的渲染进程，导致页面卡住无响应。

1. 解决map报错问题，两种方案二选一即可：
   • 方案一：修改state初始值为数组，把constructor中三个字段的初始值从null改为空数组[]，初始状态下遍历空数组不会报错，只会渲染空内容，等componentDidMount赋值后自动渲染新内容。
     代码示例：

     constructor(props){
         super(props);
         this.state = {
             Countrys: [],
             States: [],
             Citys: []
         }
     }
     

   • 方案二：在渲染处增加非空判断，用可选链运算符或者逻辑与判断Citys存在后再执行遍历：
     代码示例：

     // 可选链写法
     {this.state.Citys?.map((ele ,index) =>
         <option value={ele.id} className="d-inline mx-2 col-sm-5" onClick={({target}) => target.classList.toggle('bg-primary')}>
           {ele.name}
         </option>
     )}
     
     // 逻辑与写法
     {this.state.Citys && this.state.Citys.map((ele ,index) =>
         <option value={ele.id} className="d-inline mx-2 col-sm-5" onClick={({target}) => target.classList.toggle('bg-primary')}>
           {ele.name}
         </option>
     )}
     

2. 解决页面无响应问题：
   不要在constructor中直接调用全量数据获取方法，保持你现在把数据获取逻辑放在componentDidMount中的写法即可。如果后续渲染全量城市数据仍然卡顿，建议改为按需加载：先渲染国家列表，用户选中对应国家后再加载该国的州/省数据，选中州/省后再加载对应城市数据，避免一次性加载数万条全量数据造成性能问题。
3. 额外优化建议：你当前option的value={${ele}}写法是错误的，ele是对象，直接转字符串会得到[object Object]，建议改为ele.id或者ele.isoCode这类唯一标识字段作为value值。

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