如何延迟渲染Material-UI Select组件以解决升级后的数据警告

问题分析 #

你遇到的警告确实是因为组件首次渲染时languages数据还没通过异步请求加载完成——虽然你用了languages && languages.map做了空值判断，但Select组件的value直接取自localStorage，如果此时没有对应的MenuItem选项存在，就会触发Material-UI的警告，这和你提到的场景完全匹配。

解决思路与代码修改 #

1. 初始化State，避免undefined

先在组件构造函数里给languages初始化一个空数组，防止渲染时出现undefined的潜在问题：

constructor(props) {
  super(props);
  this.state = {
    languages: [] // 初始化空数组，让后续判断更稳定
  };
}

2. 替换废弃的生命周期方法（推荐）

componentWillMount在React 17及以后版本已经被废弃，建议换成componentDidMount来发起数据请求：

componentDidMount() {
  getLanguages.refetch({}).then(({ data }) => {
    if (data?.getLanguages) {
      this.setState({ languages: data.getLanguages });
    }
  });
}

3. 数据就绪后再渲染完整Select组件

在渲染Select之前，先判断languages是否已有数据。如果还在加载中，可以显示一个禁用的占位Select或者加载提示，避免触发警告：

<FormControl>
  <InputLabel htmlFor="lang">
    {localStorage.getItem("lang")}
  </InputLabel>
  {this.state.languages.length > 0 ? (
    // 数据就绪时渲染完整的Select
    <Select 
      value={this.getValidLang()} // 用自定义方法确保value有效
      onChange={e => this.changeLng(e.target.value, i18n)} 
      inputProps={{name: "lang", id: "lang"}}
    >
      {this.state.languages.map((item, index) => (
        <MenuItem key={index} value={item.value}>
          {item.name}
        </MenuItem>
      ))}
    </Select>
  ) : (
    // 数据未就绪时显示加载状态
    <Select disabled>
      <MenuItem value="">Loading languages...</MenuItem>
    </Select>
  )}
</FormControl>

4. 确保Select的value是有效选项

添加一个辅助方法，检查localStorage中的语言是否存在于加载后的languages列表中，避免出现无效value的情况：

getValidLang = () => {
  const savedLang = localStorage.getItem("lang");
  const { languages } = this.state;
  // 检查savedLang是否在可选列表中，不在的话用第一个选项的value或者空值
  return languages.some(item => item.value === savedLang) 
    ? savedLang 
    : languages[0]?.value || "";
};

这样修改后，就能确保只有当languages数据完全加载完成，并且Select的value是有效选项时，才会渲染完整的组件，从根源上解决警告问题。

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