avataaars icon indicating copy to clipboard operation
avataaars copied to clipboard

Published 20 hours ago • verified publisher icon fangpenlin

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

Open yangwawa0323 opened this issue 1 year ago • 1 comments

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 avatar Apr 20 '23 13:04 yangwawa0323

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

yangwawa0323 avatar Apr 23 '23 01:04 yangwawa0323