React State is not showing when used outside console log

Question

I'm using antd with react to upload an image to each of my facilities. The uploading is working, but I can't seem to get the preview from the previous image to show up where it should, by pulling the existing image from the database. What happens is that it will only show the new image, after it has been uploaded via drag and drop but not the previous one stored in the database. I'm pulling the url of the previous image with the const "testing" and I can log it and it will show inside the console but it will not show when I use it in the setFileList const. What am I missing here?

export function FacilityUpdate() {
    
    const navigate = useNavigate()
    const { id } = useParams()

    const [facility, setFacility] = useState(null)
    const accessToken = useSelector((state) => state.tokens.value.accessToken);
    const [loadingFacility, setLoadingFacility] = useState(false)
    const [loading, setLoading] = useState(false)

    const dispatch = useDispatch();

    useEffect(() => {
        if (facility && !facility.is_owner) {
            navigate('/facilities')
        }
        return () => null
    })
    useEffect(() => {
        setLoadingFacility(true)
        function fetchFacility() {
            axios.get(API.facilities.retrieve(id), {
                headers: {
                    "Authorization": `Bearer ${accessToken}`
                },
                withCredentials: true,
            })
                .then(res => {
                    setFacility(res.data)
                })
                .finally(() => {
                    setLoadingFacility(false)
                })
        }
        fetchFacility()
        return () => null
    }, [id, accessToken])

    const testing = facility && (facility.mainimage)

    console.log(testing)

    const [fileList, setFileList] = useState([
        {
          uid: '-1',
          name: testing,
          status: 'done',
//This is where the preview image gets loaded from the database:
          url: testing,
        },
      ]);
    const onUploadDraggerChange = ({ fileList: newFileList, file: resp }) => {        
        setFileList(newFileList);

        if (!resp || !resp.response || !resp.response.mainimage) {
          return;
        }
        message.success("Updated facility picture")
      };



      const uploadDraggerrops = {
        name: 'mainimage',
        action: API.facilities.update(id),
        method: 'PATCH',
        listType: "picture-card",
        maxCount: 1,
        onChange: onUploadDraggerChange,
        fileList: fileList,
        headers: {
            "Authorization": `Bearer ${accessToken}`
        },
        withCredentials: true,
    };

Answer 1

The problem with your code might come from this line on onUploadDraggerChange:

setFileList(newFileList);

Before updating the state of fileList, fileList is an array with an element that contains that previous picture. When you call onUploadDraggerChange you are erasing the stored content and replacing it with the new one. Maybe you want to push it to add to the array?

setFileList([...fileList, newFileList]);

This way, the first element is the one fetched and the consequent ones from the draggerUpload.

Any case, it looks like the structure of your state should look like

const [facility, setFacility] = useState(null)
const [fileList, setFileList] = useState([]);
useEffect(() => {
    if (facility && !facility.is_owner) {
        navigate('/facilities')
    }
    return () => null
})
useEffect(() => {
    setLoadingFacility(true)
    function fetchFacility() {
        axios.get(API.facilities.retrieve(id), {
            headers: {"Authorization": `Bearer ${accessToken}`},
            withCredentials: true,
        })
        .then(res => {
               setFacility(res.data)
               res && (res.mainimage) {
                   setFileList([...filelist, {
                       uid: 'some-random-id',
                       name: testing,
                       status: 'done',Ï
                       url: res.mainimage
                   }])
         })
         .finally(() => {
                    setLoadingFacility(false)
         })
    }
    fetchFacility()
    return () => null
}, [id, accessToken])