警告：子上下文类型失败：提供给“CellRenderer”的“数字”类型的子上下文“virtualizedCell.cellKey”无效，应为“字符串”

Posted 2023-02-22

【中文标题】警告：子上下文类型失败：提供给“CellRenderer”的“数字”类型的子上下文“virtualizedCell.cellKey”无效，应为“字符串”

【英文标题】：Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'

【发布时间】：2018-09-09 16:34:21

【问题描述】：

我从 react 16.2 -> 16.3-alpha-1 和 react-native 0.52->0.54 升级，并在模拟器中收到上述警告。

【问题讨论】：

我什至没有使用 keyExtractor 属性，而且我还是收到了这个警告。不得不将这种垃圾噪音添加到我的代码中以避免警告。错误的 API。

【参考方案1】：

你可以试试这个解决方案：

keyExtractor=(item, index) => item + index.toString()

【讨论】：

这个答案已经由用户 Aun Abbas 提供。重复。

我知道 但是有一段时间 index.toString() 没有解决问题，所以 item+index.toString() 是修复警告的最佳解决方案，

【参考方案2】：

keyExtractor=(item, index) => index.toString()

这将解决React和React Native给出的警告。

【讨论】：

我总是很欣赏那些可以在不改变行为的情况下消除警告同时也适用于各种情况的答案

请注意，使用数组索引作为组件的键是一种不好的做法，React 文档不鼓励这样做（除非绝对没有其他选择）在这里查看更多信息reactjs.org/docs/lists-and-keys.html

【参考方案3】：

要修复任何使用 keyExtractor 的列表组件中的错误，请使用 .toString() 更新组件（FlatList 等）以具有 字符串键。 现在所有键都必须是字符串值。

如下所示；

keyExtractor=item => item.index_id

到

keyExtractor=item => item.index_id.toString()

此更改是 keyExtractor 的所有使用的要求，因此将包括 React-Native 组件，例如； FlatList 和 ActionSheet。

【讨论】：

像魅力一样工作

我一直使用 KEY=item => item.id 而不是使用 keyEXTRACTOR。 :D 谢谢！