Доступ к начальным значениям состояния реакции осуществляется при любом вызове функции в прослушивателе сообщений Chrome.

Question

Так что я немного разбираюсь в написании расширений для Chrome с помощью react js. Для меня ситуация не имеет смысла, потому что с точки зрения пользовательского интерфейса все рендерится так, как ожидалось. Я прикрепил хромированный прослушиватель сообщений к моему хуку useEffect, чтобы выполнять операции на основе передаваемых сообщений. Так, например, когда мой корпус переключателяchromeActions.SET_IMAGE_OBJECT_IN_DAILOG_APP доволен, я обновляю состояние реакции через renderImageInAppфункция. На основании этих изменений состояния мой пользовательский интерфейс ведет себя так, как я ожидаю, однако, если яconsole.log конкретное состояние позволяет сказать imagObject сразу после установки он показывает значения пустых элементов для imgURL а также imgId что не имеет никакого смысла, потому что если imgURL было пусто, чем то, как я рендер ImageCropperКомпонент, который он никогда не отобразит, но он делает. У меня есть работа, заключающаяся в том, что я передаю все значения состояния компоненту ImageCropper, и там есть еще один прослушиватель сообщений, который может передавать эту информацию обратно в фоновый скрипт, и это снова может быть полученоDailogAppкомпонент и вместо доступа к значениям из состояния DailoadApp я использую эти переданные значения, но я думаю, что это неправильный способ того, как это должно быть сделано. Может ли кто-нибудь сказать мне, почему я получаю значения начального состояния в моем слушателе сообщенийDailogAppвместо последних государственных значений? и есть ли лучший способ сделать то, что я пытаюсь сделать? Я пробовал добавитьimagObject в useEffectsarray (второй аргумент), но по какой-то причине, когда я нажимаю кнопку сохранения, изображение сохраняется дважды. Код не в хорошем состоянии на данный момент я нахожусь в середине разработки, поэтому, пожалуйста, не судите. Заранее благодарю всех, кто может помочь.

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

//MUI
import { makeStyles } from "@material-ui/core";
import Grid from '@material-ui/core/Grid';
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";


// Helper Functions:
import { toggle } from './scripts/content/initiContent'
import { chromeActions, createMsgObjct } from './scripts/common/common'

import ImageCropper from './components/image_crop/ImageCropper'


const useStyles = makeStyles(theme => ({
    fullScreen: {
        height: '100%',
        width: '100%',
        margin: '0%'
    },
    controlsContainer: {
        width: '100%',
        marginTop: '0%',
    },
    toolbarButton: {
        backgroundColor: '#f0f0f7',
        width: '25%',
        borderRadius: '0px'
    },
    buttonLeft: {
        marginLeft: '2%'
    },
    buttonRight: {
        marginRight: '2%'
    },
    root: {
        width: '80%',
        height: '80%'
    }
}))

export default function DailogApp() {
    const saveButtonLabel = "Save" // INTERNATIONALIZATION_REQUIRED
    const cancelButtonLabel = "Cancel" // INTERNATIONALIZATION_REQUIRED
    const updateButtonLabel = "Update"// INTERNATIONALIZATION_REQUIRED
    const deleteButtonLabel = "Delete"// INTERNATIONALIZATION_REQUIRED
    const backToOriginalLabel = "Back to original" // INTERNATIONALIZATION_REQUIRED

    //States
    const [imagObject, setImagObject] = useState({
        imgURL: '',
        imgId: ''
    })
    const [showUpdateControls, setShowUpdateControls] = useState(false)
    const [finalCroppedImageURL, setFinalCroppedImageURL] = useState('')
    const [showBackToOriginal, setShowBackToOriginal] = useState(false)
    const [isFullScreenShot, setIsFullScreenShot] = useState(false)
    const [originalImageURL, setOriginalImageURL] = useState('')
    const [isExistingImage, setIsExistingImage] = useState(false)

    useEffect(() => {
        chrome.runtime.onMessage.addListener(
            (request, sender, sendResponse) => {
                switch (request.action) {
                    case chromeActions.SET_IMAGE_OBJECT_IN_DAILOG_APP: {
                        renderImageInApp(request.msgObject, false)
                        break;
                    }
                    case chromeActions.RENDER_EXISTING_SCREENSHOT:
                        renderImageInApp(request.msgObject, true)
                        toggle("aclipp-dailog-container")
                        break;
                    case chromeActions.SET_FINAL_IMG: {
                        setFinalImgURLAfterSaveClick(request.msgObject)
                    }
                    default:
                        return
                }
            }
        )
    }, [])

    const classes = useStyles();

    const renderImageInApp = (imgObject, _isExisitingImage) => {
        const { imgURL, imgId, fullScreenShot } = imgObject
        setIsFullScreenShot(fullScreenShot)
        setIsExistingImage(_isExisitingImage)
        console.log(imgObject) // This prints the values
        setImagObject({ ...imagObject, imgURL, imgId })
        console.log(imagObject)// prints empty imgURL, and imgId
        setOriginalImageURL(imgURL)
    }

    const reInitializeApp = () => {
        toggle("aclipp-dailog-container")
        toggle("aclipp-container")
        setImagObject({ ...imagObject, imgURL: '', imgId: '' })
        setFinalCroppedImageURL('')
        setOriginalImageURL('')
        setShowBackToOriginal(false)
        setIsFullScreenShot(false)
        setShowUpdateControls(false)
        setIsExistingImage(false)
    }

    const onCancelButtonClick = (e) => {
        e.preventDefault()
        reInitializeApp()
    }

    const sendFinalImageToBackGround = (message, imgObject) => {
        const finalImagelObject = {
            imgURL: imgObject.imgURL,
            imgId: imgObject.imgId,
            fullScreenShot: isFullScreenShot
        }
        console.log(finalImagelObject)
        chrome.runtime.sendMessage(createMsgObjct(message, finalImagelObject))
        reInitializeApp()
    }

    const onSaveClick = (e) => {
        e.preventDefault()
        chrome.runtime.sendMessage(createMsgObjct(chromeActions.GET_RESULTANT_CROPPED_IMG_URL))
    }

    const onDeleteClick = (e) => {
        e.preventDefault()
        chrome.runtime.sendMessage(createMsgObjct(chromeActions.DELETE_EXISTING_SCREEENSHOT, imagObject))
        reInitializeApp()
    }

    const setFinalImgURLAfterSaveClick = (imgObject) => {
        sendFinalImageToBackGround(isExistingImage ? chromeActions.UPDATE_EXISTING_SCREENSHOT : chromeActions.SAVE_SCREENSHOT, imgObject)
    }

    const onCropStartShowBackToOriginal = () => {
        setShowBackToOriginal(true)
        setShowUpdateControls(true)
    }

    const onBackToOriginalClick = () => {
        setShowBackToOriginal(false)
        setShowUpdateControls(false)
        const imgObject = {
            imgURL: originalImageURL,
            imgId: imagObject.imgId,
        }
        chrome.runtime.sendMessage(createMsgObjct(chromeActions.SET_CROPPER_BACK_TO_ORIGINAL_IMG, imgObject))
    }

    const onUpdateCropperClick = (e) => {
        e.preventDefault()
        chrome.runtime.sendMessage(createMsgObjct(chromeActions.UPDATE_IMAGE_TO_CROPP))
    }

    return (
        <Grid
            container
            className={classes.fullScreen}
            direction='column'
            justify="center"
            alignItems="center"
            spacing={3}
        >
            <Grid
                container
                className={classes.controlsContainer}
                direction='row'
                justify="center"
                spacing={1}
            >
                <Grid item xs={6} lg={6} sm={6}>
                    <Grid container justify='flex-end' >
                        <Button
                            variant="contained"
                            className={`${classes.toolbarButton} ${classes.buttonRight}`}
                            onClick={onCancelButtonClick}
                        >
                            {cancelButtonLabel}
                        </Button>
                    </Grid>
                </Grid>
                <Grid item xs={6} lg={6} sm={6}>
                    <Grid container
                        direction="row"
                        justify='flex-start' >
                        <Button
                            variant="contained"
                            className={`${classes.toolbarButton} ${classes.buttonLeft}`}
                            onClick={onSaveClick}
                        >
                            {saveButtonLabel}
                        </Button>
                        {
                            isExistingImage &&
                            <Button
                                variant="contained"
                                className={`${classes.toolbarButton} ${classes.buttonLeft}`}
                                onClick={onDeleteClick}
                            >
                                {deleteButtonLabel}
                            </Button>
                        }

                        {
                            showUpdateControls &&

                            <Button
                                variant="contained"
                                className={`${classes.toolbarButton} ${classes.buttonLeft}`}
                                onClick={onUpdateCropperClick}
                            >
                                {updateButtonLabel}
                            </Button>
                        }

                    </Grid>
                </Grid>
                {
                    showBackToOriginal &&
                    <Typography
                        style={{ cursor: 'pointer', color: 'white' }}
                        onClick={onBackToOriginalClick}
                    >
                        {backToOriginalLabel}
                    </Typography>
                }
            </Grid>
            {
                imagObject.imgURL !== '' &&
                <ImageCropper
                    src={imagObject.imgURL}
                    setFinalImgURLAfterSaveClick={setFinalImgURLAfterSaveClick}
                    onCropStartShowBackToOriginal={onCropStartShowBackToOriginal}
                    isFullScreenShot={isFullScreenShot}
                    imgId={imagObject.imgId}
                />
            }
        </Grid>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>