javascript - How to force a component to refresh in react?

Question

There is an <img src='127.0.0.1/img' /> tag inside the component that loads the image through the url. It is assumed that an all-white image is initially returned.
After the user clicks a button, background processing The picture turns completely black.
At this time, I hope that the client can automatically refresh this change and the picture will be displayed in black.
The change of state does not seem to cause another request for the address 'src='127.0.0.1/img'.
Is there any way to achieve this?
//-------------------
Ask another question. . Can react be used with redux without react-redux? If not used, how can the store be distributed to each component?

//index.js
const store = createStore();
render(
        <component_a />
        <component_b />
    ,document.getElementById('app'));

Answer 1

I don’t know what you are talking about, but if you just want to reload the image after the user edits it, you can set a flag to determine whether the image has been operated. After the operation is completed, use setState to change the flag to achieve the purpose of updating the image

Answer 2

Maybe it’s not react’s fault. Please send me the code on how to process images

Answer 3

Add a key to <img />, and then return a different key in the next render() of the parent component.

Note: This may cause significant changes in the diff update operation, such as unmount/mount that was not available before, or the display will be significantly slower.

---

You can use redux without react-redux, as long as you use other methods to pass the store to all components, such as using props or context.