this problem has already been written, but it hasn't been solved, so I'll upload it again, so please understand. I made a function that registers an image in child component, and makes the image visible in parent component, and erases the image by also setting the value of url to "" in parent component. I can see the image well, but when I erase the image, the url of the image is erased and then the original url value is entered again. I think there is a problem in the process of passing the url value from child component to parent component as a function. I received the following answer in the previous article, and I think this is the right reason, but I don't know how to modify the code. I'd appreciate it if you let me know, thanks.

On deleting image in parent component you need to pass that state to the child and make sure it is in sync with the similar state in child. Else the child state preview will always have a value and since the toParent callback isn't wrapped in useEffect hook it'll run everytime setting a value to isUrl state. You could move all the code in useEffect and toParent callback inside handleChange method.

Cild.jsx:

this is child component. Upload the image here and pass the url value to parent component through 'toParent'

   import React, { useEffect, useState } from 'react'

   function Child({toParent}) {


//file upload functions
const fileInput = React.useRef(null);

const [isfile,setIsfile] = useState("");

const handleButtonClick = e => {
  fileInput.current.click();
};

const handleChange = e => {
  setIsfile(e.target.files[0]);
  console.log(e.target.files[0]);
}; 

const [preview, setPreview] = useState('');

useEffect(() => {
if (isfile) {
  const objectUrl = URL.createObjectURL(isfile); 
    setPreview(objectUrl);
  }
  return () => URL.revokeObjectURL(isfile);      
}, [isfile]);

//pass state to parent
toParent(preview)

return (
 <h1>
  <input 
    type="file" 
    style={{display:'none'}}
    ref={fileInput}
    onChange={handleChange}
    multiple={true}/>
  <button onClick={handleButtonClick}>
    upload
  </button>
  </h1>
)
}

export default Child;

App.js:

and this is parent component. Get the url value here and show the image. Also, if I press delete, I want to empty the url of the image, but I can't. How can I empth the url??

   import { useState } from "react";
   import Child from "./Child";

function App() {

//receive state from child
const [isUrl,setIsUrl] = useState("")
const toParent = (url) => {
  setIsUrl(url);
}

//delete image
const handelDelete = (e) => {
  setIsUrl(" ")
}

return (
<div className="App">
  <Child toParent={toParent} />
  <div>
    <img 
    style={{width:'300px', height:'300px'}}
    src={isUrl}/>
  </div>
  <div>
    <div onClick={handelDelete}>
      delete
    </div>
    </div>
  </div>
);
   }

  export default App;

CodePudding user response：

I don't exactly why yours is not working, i have simplified the use of the state, try this:

Child.jsx:

import React, { useEffect, useState } from "react";

function Child({ setUrl }) {
  const fileInputRef = React.useRef(null);
  const [file, setFile] = useState("");

  const handleButtonClick = (e) => {
    fileInputRef.current.click();
  };

  const handleChange = (e) => {
    setFile(e.target.files[0]);
    console.log(e.target.files[0]);
  };

  useEffect(() => {
    if (file) {
      const objectUrl = URL.createObjectURL(file);
      setUrl(objectUrl);
    }
    return () => URL.revokeObjectURL(file);
  }, [file]);

  return (
    <h1>
      <input
        type="file"
        style={{ display: "none" }}
        ref={fileInputRef}
        onChange={handleChange}
        multiple={true}
      />
      <button onClick={handleButtonClick}>upload</button>
    </h1>
  );
}

export default Child;

App.js:

import { useState } from "react";
import Child from "./Child";

function App() {

  const [url, setUrl] = useState("")

  const handleDelete = () => {
    setUrl("");
  }

  return (
    <div className="App">
      <Child setUrl={setUrl} />
      <div>
        <img
          style={{ width: '300px', height: '300px' }}
          src={url} />
      </div>
      <div>
        <div onClick={handleDelete}>
          delete
        </div>
      </div>
    </div>
  );
}

export default App;

CodePudding user response：

Some of the browsers cache the React code. So, try to clear the browser cache. Check this link, how to clear browser cache in reactjs