React 应用程序“遇到两个具有相同键的子项，`thumb-undefined`”

Question

我正在尝试在我的

react

应用程序中创建一个时间滑块，但我无法克服下面这个不断出现在我的浏览器控制台中的错误。

bundle.js:21658 Warning: Encountered two children with the same key, `thumb- 
undefined`. Keys should be unique so that components maintain their identity across 
updates. Non-unique keys may cause children to be duplicated and/or omitted — the 
behavior is unsupported and could change in a future version.

我是反应新手，下面是我的代码 - 知道为什么会发生这种情况吗？

                    <Card className="mb-3 border-0 shadow-sm">
                        <Card.Body>
                            <Form.Label className="fw-medium pb-2">Time Range</Form.Label>
                            <div className="px-2">
                                <Range
                                    values={timeRange}
                                    step={1}
                                    min={6}
                                    max={21}
                                    onChange={(values) => setTimeRange(values)}
                                    renderTrack={({ props, children }) => {
                                        const { key, ...restProps } = props;
                                        return (
                                            <div
                                                key={`track-${restProps['aria-valuemin']}-${restProps['aria-valuemax']}`}
                                                {...restProps}
                                                style={{
                                                    ...restProps.style,
                                                    height: '6px',
                                                    width: '100%',
                                                    backgroundColor: '#ddd'
                                                }}
                                            >
                                                {children}
                                            </div>
                                        );
                                    }}
                                    renderThumb={({ props, isDragged }, idx) => {
                                        const { key, ...restProps } = props;
                                        return (
                                            <div
                                                key={`thumb-${idx}`}
                                                {...restProps}
                                                style={{
                                                    ...restProps.style,
                                                    height: '24px',
                                                    width: '24px',
                                                    borderRadius: '50%',
                                                    backgroundColor: 'var(--primary-color)',
                                                    display: 'flex',
                                                    justifyContent: 'center',
                                                    alignItems: 'center'
                                                }}
                                            >
                                                <div
                                                    style={{
                                                        height: '16px',
                                                        width: '5px',
                                                        backgroundColor: isDragged ? 'var(--primary-color)' : '#CCC'
                                                    }}
                                                />
                                            </div>
                                        );
                                    }}
                                />
                            </div>
                            <div className="d-flex justify-content-between mt-2">
                                <span>{`${timeRange[0] > 12 ? timeRange[0] - 12 : timeRange[0]}:00 ${timeRange[0] >= 12 ? 'PM' : 'AM'}`}</span>
                                <span>{`${timeRange[1] > 12 ? timeRange[1] - 12 : timeRange[1]}:00 ${timeRange[1] >= 12 ? 'PM' : 'AM'}`}</span>
                            </div>
                        </Card.Body>
                    </Card>

我已经多次调整了关键...道具，但仍然无法使其工作。 SO 有几个问题有类似的答案，但我的经验不足正在努力将这些答案映射到我的代码片段。任何帮助将不胜感激。

Answer 1

在

renderThumb

函数中，

idx

未定义。一般来说，在键中使用索引值不是一个好的做法，因为它会根据元素的数量而变化。也许找到该元素独有的另一个道具并将其用作键。