React与React Native升级后出现virtualizedCell.cellKey类型警告求助

解决React/React Native升级后的virtualizedCell.cellKey类型不匹配警告 #

嘿，我之前升级React和React Native到对应版本时也碰到过一模一样的警告！问题根源是React 16.3开始对上下文的类型校验变得更严格了，而React Native 0.54里的CellRenderer组件预期virtualizedCell.cellKey是字符串类型，但内部生成的cellKey却是数字，这就触发了类型不匹配的警告。

给你几个亲测有效的解决办法：

1. 自定义CellRenderer组件转换类型 #

这是最直接的修复方式，我们可以包装原生的CellRenderer，把传入的cellKey转成字符串再传递：

import { CellRenderer } from 'react-native/Libraries/Lists/CellRenderer';

// 自定义CellRenderer，处理cellKey类型转换
const CustomCellRenderer = (props) => {
  const adjustedProps = {
    ...props,
    // 把number类型的cellKey强制转为string
    cellKey: String(props.cellKey)
  };
  return <CellRenderer {...adjustedProps} />;
};

然后在你的FlatList或者SectionList里指定使用这个自定义组件：

<FlatList
  data={yourDataSource}
  cellRendererComponent={CustomCellRenderer}
  renderItem={({ item }) => <YourCustomItem item={item} />}
  // 其他必要属性（比如keyExtractor之类的）...
/>

2. 确保keyExtractor返回字符串（辅助优化） #

虽然上面的方法已经能解决警告，但如果你想从源头规范key的类型，可以在FlatList/SectionList的keyExtractor里明确返回字符串类型：

<FlatList
  keyExtractor={(item, index) => String(item.id || index)}
  // 其他属性...
/>

这个步骤可以和自定义CellRenderer配合使用，进一步避免潜在的类型问题。

3. 临时禁用警告（不推荐） #

如果只是想临时屏蔽这个警告（不建议长期这么做，因为类型警告通常是有用的），可以在项目入口添加：

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['子上下文类型错误：提供给CellRenderer的子上下文‘virtualizedCell.cellKey’类型为number，预期类型为string。']);

不过还是优先推荐前两种方法，毕竟类型校验能帮我们避免更多潜在问题。

这个问题是React 16.3新增的上下文类型验证机制和RN 0.54内部组件适配不兼容导致的，后续RN官方版本应该会修复这个问题，但当前版本只能手动处理啦。

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