react-native-pie icon indicating copy to clipboard operation
react-native-pie copied to clipboard

duplicate key

Open soroushm opened this issue 4 years ago • 1 comments

Looks like artGroup using I for key and for each item on pie have a duplicate key

ExceptionsManager.js:126 Warning: Encountered two children with the same key, `3`. 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.
    in ARTGroup (at Group.js:35)
    in Group (at Pie.js:129)
    in RoundDividers (at Pie.js:178)
    in ARTGroup (at Group.js:35)
    in Group (at Pie.js:169)
    in ARTSurfaceView (at Surface.js:37)
    in Surface (at Pie.js:168)
    in Pie (at ModaBuyingPower.tsx:105)
    in RCTView (at ModaBuyingPower.tsx:104)
    in RCTSafeAreaView (at SafeAreaView.js:55)
    in SafeAreaView (at ModaBuyingPower.tsx:98)
    in RCTView (at Paper.tsx:58)
    in Paper (created by Context.Consumer)

soroushm avatar Mar 17 '20 20:03 soroushm

I hope this helps you still but I had the same problem and I could fix it with a workaround.

Just go to Pie.js and find RoundDividers function and then the following part of the code:

if (paintedSections.length > 1 && visible) {
    paintedSections.forEach((section, index) => {
        const {color, startAngle} = section;

        for (let i = 0; i < dividerSize + 2; i++) {
        dividerArray.push(
            <ArcShape
            key={index}      // ===> Should be replaced with something unique. I had replaced it with `'DA'+index+i.toString()`
            dimensions={dimensions}
            color={backgroundColor}
            startAngle={
                startAngle + section.arcAngle + dividerSize + i - dividerOffSet
            }
            arcAngle={1}
            isBezian={isBezian}
            strokeCap={strokeCap}
            />,
        );
        dividerColorOverlayArray.push(
            <ArcShape
            key={index}      // ===> Should be replaced with something unique. I had replaced it with `'DCOA'+index+i.toString()`
            dimensions={dimensions}
            color={color}
            startAngle={
                startAngle + section.arcAngle - dividerSize + i - dividerOffSet
            }
            arcAngle={1}
            isBezian={isBezian}
            strokeCap={strokeCap}
            />,
        );
        }
    });
}

As you can see in the warnings, those keys aren't unique, and you should replace them with unique keys.

I wrote my personal workaround in the above code snippet.

shkatebi97 avatar Mar 31 '21 17:03 shkatebi97