ReactImageAnnotate props don't update with state change

[nbenhaim]

Hi, I'm pretty new to react so this is may be something I'm doing wrong on my end, but I wrapped ReactImageAnnotate component in my own component, update the state on a button click callback, and feed the state's values back into image_url and images props - but the UI doesn't update with my new images. I simply got started by doing npm create-react-app and then npm install react-image-annotate

[bozazec]

I am facing the same problem. Component is rendered properly, consuming local state variable which is empty array at the beginning.

After async loading of images this variable is updated in local state but it looks like ReactImageAnnotate component doesn't update.

I can manually refresh the annotator if there is a way. Any comment on this?

[seveibar]

Sorry for the delay getting back to this- somehow I missed it!

Yes this is a problem, we carefully memoize to optimize the component and it sometimes causes a refreshing bug.

The workaround until this is fixed is to set a key={imageUrl} on the annotator. Whenever the key changes the component will refresh.

Thanks and sorry for the delay!!

[solix]

@seveibar could you elaborate more about this fix? I have the same issue when using react-image-annotate tool. I tried to add key={imageUrl} but it failed to load the new local images state!

I am getting the following error: TypeError: Cannot read property 'regions' of undefined

[seveibar]

Hey @solix, can you provide a code sandbox? I'm going to be taking a look at this soon and that could speed up the process!

[solix]

Hey @seveibar, I could fix the issue by adding images list to key prop like key = {this.state.images}, and then it was fine.