Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When I update any style the avataaar , got a warning. #65

Open
yangwawa0323 opened this issue Apr 20, 2023 · 1 comment
Open

When I update any style the avataaar , got a warning. #65

yangwawa0323 opened this issue Apr 20, 2023 · 1 comment

Comments

@yangwawa0323
Copy link

yangwawa0323 commented Apr 20, 2023 •
edited

When the 1st time to change one style of avataaar. the develop tools has a warning message.
but when I change style again , there is no warning.
There is occured when the 1st time page loaded.

Head-export-handler-for-browser.js:72 Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
 
at Selector (webpack-internal:///./node_modules/avataaars/dist/options/Selector.js:31:47)
    at FacialHair (webpack-internal:///./node_modules/avataaars/dist/avatar/top/facialHair/index.js:29:42)
    at g
    at g
    at g
    at Hat (webpack-internal:///./node_modules/avataaars/dist/avatar/top/Hat.js:24:47)
    at Selector (webpack-internal:///./node_modules/avataaars/dist/options/Selector.js:31:47)
    at Top (webpack-internal:///./node_modules/avataaars/dist/avatar/top/index.js:58:42)
    at g
    at g
    at g
    at g
    at svg
    at Avatar (webpack-internal:///./node_modules/avataaars/dist/avatar/index.js:34:47)
    at AvatarComponent (webpack-internal:///./node_modules/avataaars/dist/index.js:34:47)

My code show below

import React from 'react'
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Select, MenuItem, InputLabel, Box } from '@mui/material'
import { useContext } from 'react'
import { ProfileContext } from './ProfileContextProvider'
import { debugLog } from '51cloudclass-utilities/src/utils'
import Avatar, {  } from 'avataaars';


const MyAvataaar = () => {

    const { topStyle } = useContext(ProfileContext)

    return <Avatar
        style={{ width: '200px', height: '200px' }
        }
        avatarStyle='Circle'
        topType={topStyle}
        // accessoriesType='Prescription02'
        hairColor='BrownDark'
        facialHairType='Blank'
        // clotheType='Hoodie'
        // clotheColor='PastelBlue'
        eyeType='Happy'
        eyebrowType='Default'
        mouthType='Smile'
        skinColor='Light'
    />
}

const AvataaarDialog = () => {

    const { open, closeDialog, topStyle, setTopStyle } = useContext(ProfileContext);


    const handleChangeAvataaar = () => {
        debugLog("change avataaar")
    }

    const changeStyle = (e) => {
        const target = e.target;
        debugLog("name of target: ", target.name);
        switch (target.name) {
            case "top-style":
                setTopStyle(e.target.value);
                break;
            default:
                return
        }

    }

    return (
        <Dialog open={open} onClose={closeDialog} >
            <DialogTitle>
                我们不一样，头像也扮靓
            </DialogTitle>
            <DialogContent className="flex flex-col gap-2">
                <MyAvataaar />
                <Box className="w-full flex flex-col gap-2">
                    <InputLabel id="top-style">发型</InputLabel>
                    <Select defaultValue='NoHair' size="small" name="top-style" labelId='top-style' value={topStyle} onChange={changeStyle}>
                        <MenuItem value="NoHair">我佛慈悲</MenuItem>
                        <MenuItem value="Hat">牛仔帽</MenuItem>
                        <MenuItem value="LongHairDreads">脏发</MenuItem>
                    </Select>
                </Box>
            </DialogContent>
            <DialogActions>
                <Button
                    onClick={closeDialog}
                    color="primary"
                >
                    取消
                </Button>
                <Button variant="contained" onClick={handleChangeAvataaar}>
                    更换
                </Button>
            </DialogActions>
        </Dialog>

    )
}

export default AvataaarDialog
@yangwawa0323
Copy link
Author

yangwawa0323 commented Apr 23, 2023 •
edited

Seem the avataaar is not compatibled with React 18.x, it using the deprecated component loading Hooks in class-based component.

I am create a new development env by

yarn create react-app avataaar --template typescript

and copied the project's code from https://github.com/fangpenlin/avataaars-generator
but still has the error message come from the development tools of the chrome browser.

rning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
    at Selector (http://localhost:3000/static/js/bundle.js:12509:43)
    at FacialHair (http://localhost:3000/static/js/bundle.js:12019:38)
    at g
    at g
    at g
    at NoHair (http://localhost:3000/static/js/bundle.js:8507:43)
    at Selector (http://localhost:3000/static/js/bundle.js:12509:43)
    at Top (http://localhost:3000/static/js/bundle.js:12105:38)
    at g
    at g
    at g
    at g
    at svg
    at Avatar (http://localhost:3000/static/js/bundle.js:5721:43)
    at div
    at main
    at Main (http://localhost:3000/static/js/bundle.js:452:5)
    at AddUrlProps (http://localhost:3000/static/js/bundle.js:65797:9)
    at App (http://localhost:3000/static/js/bundle.js:28:1)
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnAboutUpdateOnNotYetMountedFiberInDEV @ react-dom.development.js:27402
markUpdateLaneFromFiberToRoot @ react-dom.development.js:13413
enqueueConcurrentClassUpdate @ react-dom.development.js:13376
enqueueUpdate @ react-dom.development.js:13525
enqueueForceUpdate @ react-dom.development.js:14117
Component.forceUpdate @ react.development.js:373
Selector._this.optionContextUpdate @ Selector.js:33
OptionContext.notifyListener @ OptionContext.js:116
OptionContext.setState @ OptionContext.js:111
OptionContext.optionExit @ OptionContext.js:67
Selector.componentWillUnmount @ Selector.js:62
callComponentWillUnmountWithTimer @ react-dom.development.js:22852
safelyCallComponentWillUnmount @ react-dom.development.js:22873
commitDeletionEffectsOnFiber @ react-dom.development.js:24129
recursivelyTraverseDeletionEffects @ react-dom.development.js:23989
commitDeletionEffectsOnFiber @ react-dom.development.js:24133
recursivelyTraverseDeletionEffects @ react-dom.development.js:23989
commitDeletionEffectsOnFiber @ react-dom.development.js:24018
recursivelyTraverseDeletionEffects @ react-dom.development.js:23989
commitDeletionEffectsOnFiber @ react-dom.development.js:24018
recursivelyTraverseDeletionEffects @ react-dom.development.js:23989
commitDeletionEffectsOnFiber @ react-dom.development.js:24018
recursivelyTraverseDeletionEffects @ react-dom.development.js:23989
commitDeletionEffectsOnFiber @ react-dom.development.js:24018
recursivelyTraverseDeletionEffects @ react-dom.development.js:23989
commitDeletionEffectsOnFiber @ react-dom.development.js:24133
commitDeletionEffects @ react-dom.development.js:23976
recursivelyTraverseMutationEffects @ react-dom.development.js:24259
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24346
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24273
commitMutationEffectsOnFiber @ react-dom.development.js:24432
commitMutationEffects @ react-dom.development.js:24243
commitRootImpl @ react-dom.development.js:26810
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@yangwawa0323