- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
昨天我将 react-router-dom
添加到我的项目中,现在当我离开并返回导航中的 Sky
元素时,它会重新加载天空,我得到
Warning: flattenChildren(...): Encountered two children with the same key,
element-id-50
. Child keys must be unique; when two children share a key, only the first child will be used.
(上面使用的数字 50 只是一个例子,它每次都会抛出这个错误 ~40 次,所有的 id 都不同)
问题似乎出在我的 sky.js
文件中:
componentWillMount() {
this.props.dispatch(requestSkySetup());
this.props.dispatch(requestAllElements());
this.setState({loadedSky: true, loadedElements: true});
}
因为每次我转到另一个屏幕时,这个组件都会卸载,然后在我回来时重新安装。
当receiveSkySetup
完成后,sky.js
中的render
函数创建了一堆名为Sector
的div s 和每个 Sector
创建一些称为 Slot
的 div。
然后在 Slot.render
里面我有:
return connectDropTarget(
<div className={showOutline ? 'slot showOutline' : 'slot'} style={style} onClick={interactable ? this.handleClick : null}>
{
elements
.map(e => (
<SkyElement
id={e.id}
key={`element-id-${e.id}`}
title={e.title}
size={150}
opacity={e.opacity}
glow={e.glow}
color={e.color}
sectorId={e.sectorId}
slotId={e.id}
dispatch={this.props.dispatch}
isDragging={false}
transformElement={false} />
))
}
</div>
);
上面 SkyElement
调用中的 key
元素是每次挂载时抛出 40 多个错误的原因。
如果需要,很乐意提供更多代码。
任何帮助都会非常有帮助。谢谢!
编辑:控制台日志元素
再深入一点,我店里的商品翻了一番。
因此,在 sky
选项卡的第二次渲染中,元素 ID 的完整列表是 ["0", "1", "2", "3", "4 ", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", “61”、“62”、“63”、“64”、“65”、“66”、“67”、“77”、“78”、“0”、“1”、“2”、“3” ", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", “60”、“61”、“62”、“63”、“64”、“65”、“66”、“67”、“77”、“78”]
在第 3 次渲染时,元素 0-78(从上面的数组中应用的 id)将再次添加到数组中
在 Slot.js
const mapStateToProps = ({elements}, ownProps) => {
return {
elements: getElementsBySlotId(elements, ownProps.id),
};
};
elements
这里将是 n
Sky
已完成的加载次数的 n
倍。
在 sky.js
const mapStateToProps = ({sky, elements}) => {
return {
sectors: getSky(sky).sectors,
elements: getElementsByKeyName(elements, 'visibleElements'),
unplacedElements: getElementsByKeyName(elements, 'unplacedElements'),
};
};
打印 elements.length
我看到它们在这里也加倍了。 Slot.js 是从同一家商店提取的,所以这是有道理的
在我的 elements/reducer.js
case 'receiveAllElements':
const visibleElements = {};
const unplacedElements = {};
const elements = action.elements.reduce((result, index) => {
result[`${index.id}`] = index;
return result;
}, {});
const keys = Object.keys(elements);
for (const key of keys) {
const e = elements[key];
if (e.sectorId === null) {
unplacedElements[key] = e;
} else {
visibleElements[key] = e;
}
}
const visibleIds = Object.keys(visibleElements);
const unplacedIds = Object.keys(unplacedElements);
console.log(visibleIds);
console.log(unplacedIds); // logging these, the numbers are consistent and don't double, triple etc with each load
return {
...state,
elementsMap: {
...state.elementsMap,
...elements,
},
visibleElements: [...state.visibleElements, ...visibleIds],
unplacedElements: [...state.unplacedElements, ...unplacedIds],
};
也许里面有什么东西导致计数加倍?
最佳答案
这里的问题是
return {
...state,
elementsMap: {
...state.elementsMap,
...elements,
},
visibleElements: [...state.visibleElements, ...visibleIds],
unplacedElements: [...state.unplacedElements, ...unplacedIds],
};
即 visibleElements
(和 unplacedElements
值)。
[...state.visibleElements, ...visibleIds]
将连接 2 个数组,因此每次我返回 Sky
选项卡时都会触发此代码,它将 ...visibleIds
中的新 ID 添加到我在 ...state.visibleElements
中已有的数组,并将值加倍
关于javascript - Warning : flattenChildren(. ..): Encountered two children with the same key/Child keys must be unique,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45314006/
假设我想在存储在变量中的特定表中导航。 我想在表的 thead 中找到 tr 中的所有输入。 如果我有表的 ID,我会这样做 - $('#mytable thead tr input') 但是假设我已
我是 React 新手,我正在尝试了解一般语法的工作原理,但不确定在这里提问是否合适。以下是我的一个简单标题组件的代码。 export default class Title extends Comp
我正在尝试实现在树结构中获取 child 的 child 的可能性。 这是我想要的例子。 到目前为止我做了什么。 class Children(list): def __init__(self
我一直在尝试让它工作一段时间,但不确定如何执行以下操作。我的表单组件有包含常规 html 标记和输入的子组件。如果 child 是输入,我想添加 attachToForm 和 detachFromFo
在本文档中 https://flutter.dev/docs/development/ui/layout#nesting-rows-and-columns 他们使用 children : 但是在 An
即使我只向表中添加一项内容,我似乎也无法弄清楚为什么会显示重复的子项添加错误。 有 3 个主要类: WindowTease:加载舞台并调用 loadTable() 方法 InventoryContro
我一直在查看以前提出的问题,但似乎找不到适合我的情况的解决方案... 我希望能够循环遍历所有 child 和 child 的 child 等等...... 设计中的标记看起来与此类似
这个问题在这里已经有了答案: How can I use jQuery methods on elements accessed by brackets notation? (2 个答案) 关闭 5
我有一个场景,我知道我正在寻找的 div 恰好是两层深。 使用效率是否更高: $('#mydiv').find('.myselector') 或 $('#mydiv').children().chil
我今天有一个很奇怪的问题:我有一个水平显示一些缩略图的 RecyclerView,我使用 smoothScrollToPosition 导航到我需要的项目,但我注意到一个问题:它不会滚动到最后一项。进
只有 JS,没有 Jquery。 如何获取容器的所有子节点,然后为每个子节点获取子节点? 我不想将 ID 添加到作为网格行子级的每个包装器,我尝试使用“this”或此索引进行定位。该脚本应该是动态的,
任务:在“注释”类的任何段落内的有序列表中强调强调的文本。这是我目前所拥有的... .note>p>ol>em{text-decoration:underline;} 我正在努力让它继续下去。我的代码
我有两个类如下: --- CSS: .shw-intro { width: 250px; height: 150px; background: rgb(95, 190, 0);
当前的 Firebase 数据库结构: 我要实现的目标: 在我所有位置的任何“促销”子项中搜索等于某物的优惠券。 如果找到,将其“limit”参数减少 -1 来更新它 我当前的代码: mDat
我有一个 html 表,想要获取所有行。但是,在 DebugElement 或 NativeElement 上调用 .children 会返回不同的顺序。 我的 table : 1
我在使用 Element.children 时注意到一个奇怪的问题并且似乎没有找到好的解决方法。 示例 1(预期行为) 拿这个 HTML: 还有这个 JS const formElem
目标是选择任何后代 - 无论直系后代指示如何 - 但不选择他们的 child 。换句话说,如果我从文档中搜索,我希望找到目标选择器未包含的所有子元素: test t
当我尝试执行 ParentNode.children 时,显示无法读取未定义的属性“children”。尝试让父节点的所有子节点的背景颜色为粉红色。 现在,我有一个以半小时为增量的表格,根据上午 8
我不确定这是否可行,但这是我想在 Reactjs 中实现的目标: 所以我想做的是,我想使用 React.cloneElement API 将 Comp1 组件的 pro
更新:我在另一台安装更干净的机器上试过这个。我无法在那台机器上重现这个。如果我发现是什么有问题的 (VSStudio) 组件导致了这种情况,我会告诉你的。 我从后面的代码创建了一些 UIElement
我是一名优秀的程序员,十分优秀!