react-image-annotate icon indicating copy to clipboard operation
react-image-annotate copied to clipboard

Published 20 hours ago • verified publisher icon UniversalDataTool

Error in program running

Open owen-gxz opened this issue 4 years ago • 1 comments

Error in program running

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <RightSidebar>. It was passed a child from MainLayout. See https://reactjs.org/link/warning-keys for more information.
    at ClassSelectionMenu (http://localhost:3000/static/js/0.chunk.js:134108:26)
    at http://localhost:3000/static/js/0.chunk.js:141349:25
    at div
    at http://localhost:3000/static/js/0.chunk.js:136408:22
    at HotKeysEnabled (http://localhost:3000/static/js/0.chunk.js:131360:7)
    at div
    at FullScreen (http://localhost:3000/static/js/0.chunk.js:121180:21)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at MainLayout (http://localhost:3000/static/js/0.chunk.js:136426:21)
    at SettingsProvider (http://localhost:3000/static/js/0.chunk.js:138258:23)
    at Annotator (http://localhost:3000/static/js/0.chunk.js:132170:21)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:174:85)
console.<computed> @ index.js:1
printWarning @ react.development.js:220
error @ react.development.js:196
validateExplicitKey @ react.development.js:2052
validateChildKeys @ react.development.js:2078
createElementWithValidation @ react.development.js:2233
(anonymous) @ index.js:68
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:19
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Header`. It was passed a child from MainLayout. See https://reactjs.org/link/warning-keys for more information.
    at div
    at Header (http://localhost:3000/static/js/0.chunk.js:140778:35)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at http://localhost:3000/static/js/0.chunk.js:141349:25
    at div
    at http://localhost:3000/static/js/0.chunk.js:136408:22
    at HotKeysEnabled (http://localhost:3000/static/js/0.chunk.js:131360:7)
    at div
    at FullScreen (http://localhost:3000/static/js/0.chunk.js:121180:21)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at MainLayout (http://localhost:3000/static/js/0.chunk.js:136426:21)
    at SettingsProvider (http://localhost:3000/static/js/0.chunk.js:138258:23)
    at Annotator (http://localhost:3000/static/js/0.chunk.js:132170:21)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:174:85)
console.<computed> @ index.js:1
printWarning @ react.development.js:220
error @ react.development.js:196
validateExplicitKey @ react.development.js:2052
validateChildKeys @ react.development.js:2078
createElementWithValidation @ react.development.js:2233
Header @ index.js:22
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:19
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: React does not recognize the `textHidden` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `texthidden` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at span
    at button
    at ButtonBase (http://localhost:3000/static/js/0.chunk.js:15967:22)
    at WithStyles(ForwardRef(ButtonBase)) (http://localhost:3000/static/js/0.chunk.js:52737:31)
    at Button (http://localhost:3000/static/js/0.chunk.js:15709:24)
    at WithStyles(ForwardRef(Button)) (http://localhost:3000/static/js/0.chunk.js:52737:31)
    at Styled(WithStyles(ForwardRef(Button))) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at HeaderButton (http://localhost:3000/static/js/0.chunk.js:140864:20)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at Header (http://localhost:3000/static/js/0.chunk.js:140778:35)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at http://localhost:3000/static/js/0.chunk.js:141349:25
    at div
    at http://localhost:3000/static/js/0.chunk.js:136408:22
    at HotKeysEnabled (http://localhost:3000/static/js/0.chunk.js:131360:7)
    at div
    at FullScreen (http://localhost:3000/static/js/0.chunk.js:121180:21)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at MainLayout (http://localhost:3000/static/js/0.chunk.js:136426:21)
    at SettingsProvider (http://localhost:3000/static/js/0.chunk.js:138258:23)
    at Annotator (http://localhost:3000/static/js/0.chunk.js:132170:21)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:174:85)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
validateProperty$1 @ react-dom.development.js:3513
warnUnknownProperties @ react-dom.development.js:3559
validateProperties$2 @ react-dom.development.js:3583
validatePropertiesInDevelopment @ react-dom.development.js:8765
setInitialProperties @ react-dom.development.js:9041
finalizeInitialChildren @ react-dom.development.js:10201
completeWork @ react-dom.development.js:19470
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:19
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ClassSelectionMenu`. See https://reactjs.org/link/warning-keys for more information.
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at ClassSelectionMenu (http://localhost:3000/static/js/0.chunk.js:134108:26)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at RightSidebar (http://localhost:3000/static/js/0.chunk.js:141044:23)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at http://localhost:3000/static/js/0.chunk.js:141349:25
    at div
    at http://localhost:3000/static/js/0.chunk.js:136408:22
    at HotKeysEnabled (http://localhost:3000/static/js/0.chunk.js:131360:7)
    at div
    at FullScreen (http://localhost:3000/static/js/0.chunk.js:121180:21)
    at div
    at Styled(div) (http://localhost:3000/static/js/0.chunk.js:52508:28)
    at MainLayout (http://localhost:3000/static/js/0.chunk.js:136426:21)
    at SettingsProvider (http://localhost:3000/static/js/0.chunk.js:138258:23)
    at Annotator (http://localhost:3000/static/js/0.chunk.js:132170:21)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:174:85)

code :

import './App.css';
import ReactImageAnnotate from "react-image-annotate";
import axios from "axios";
import  { useState } from 'react';

function App() {
  let [clsList, setClsList] = useState(["Alpha", "Beta", "Charlie", "Delta"])
  let [tags,setTags] = useState(["tag1", "tag2", "tag3"])
  let [image,setImage] = useState([
    {
      src: "https://placekitten.com/408/287",
      name: "Image 1",
      regions: []
    },
    {
      src: "https://placekitten.com/408/287",
      name: "Image 2",
      regions: []
    }
  ])
  function save(v) {
    console.log(v)
    let vv = JSON.stringify(v)
    console.log(vv)
  }
  function getResource() {
    axios.get("http://127.0.0.1:6655/resources").then(res => {
      console.log(res,image)
      setImage([
        {
          src: "https://placekitten.com/408/287",
          name: "Image 2",
          key: "111222",
          regions: []
        }
      ])
      console.log(image)
    })
  }
  // getResource()
  return (
    <div className="App">
      <input type="file" />
      <button onClick={getResource}>resources</button>
      <ReactImageAnnotate
        labelImages
        onExit={save}
        regionClsList={clsList}
        regionTagList={tags}
        images={image}
      />
    </div>
  );
}

export default App;

owen-gxz avatar Jan 19 '21 09:01 owen-gxz

have you solved this error ?

SuhaibMaraqa avatar Dec 18 '23 17:12 SuhaibMaraqa