Question

我有一个需要更新的功能组件。

export const VendorCategory = ({setShowProgress, user}) => {
    const classes = useStyles()
    const theme = useTheme()
    const listElements = []
    const [dummyCategory, setDummyCategory] = useState({
        "Test1": [
            "Subtest1", "Subtest2", "Subtest3"
        ],
        "Test2": [
            "Subtest1", "Subtest2", "Subtest3"
        ],
        "Test3": [
            "Subtest1", "Subtest2", "Subtest3"
        ]
    })


    useEffect(() => {
        return () => {
            console.log("re-rendered")
        }
    })
    const AddSubCategory = useCallback(() => {
        setShowProgress(true)
        const newAdd = dummyCategory['Test1']
        newAdd.push("SubTest4")
        setDummyCategory({...dummyCategory, "Test1": newAdd})
        setShowProgress(false)
    },[setShowProgress,setDummyCategory,dummyCategory])



    return (
        <div className={classes.root}>

            <h3 className={classes.title}>Vendor Category</h3>

            <Button
                className={classes.button}
                variant='contained'
                color="primary"
            >
                Add Category
            </Button>
            <div className={classes.categoryDiv}>
                {
                    Object.keys(dummyCategory).map((value, index) => {
                        return (
                            <List>
                            <Accordion key={uuid()} mt={2}>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon/>}
                                    aria-controls="panel1a-content"
                                    id="panel1a-header"
                                >
                                    <ListSubheader key={uuid()} className={classes.sublistHeader} component="div"
                                                   id="nested-list-subheader">
                                        {value}
                                    </ListSubheader>
                                </AccordionSummary>


                                <AccordionDetails className={classes.subCategoryList}>
                                    <Button
                                        className={classes.button}
                                        variant='contained'
                                        color="primary"
                                        onClick={AddSubCategory}
                                    >
                                        Add Sub-Category
                                    </Button>
                                    {dummyCategory[value].map((subvalue, index) => {
                                        return (
                                            <ListItem button key={subvalue}>
                                                <ListItemText inset primary={subvalue}/>
                                            </ListItem>
                                        )
                                    })}

                                </AccordionDetails>
                            </Accordion>
                            </List>)
                    })
                }

            </div>
        </div>
    )
}

const mapStateToProps = (state) => ({
    user: state.user
})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(VendorCategory)

问题是每次我向手风琴添加项目时都会重新渲染手风琴，然后它会崩溃。我如何阻止它因重新渲染而崩溃？UseCallback 钩子也会重新渲染。我如何使用 React.Memo 来避免这种情况？或者在这种情况下我如何使用 useEffect 。同样，我需要在手风琴不倒塌的情况下添加一个项目。是否有可能？任何帮助将不胜感激。

Answer 1

根据评论，映射的 React 元素应该被赋予唯一的、稳定的键，这些键在元素的整个生命周期中持续存在。当一个 key 发生变化时，就 React 而言，一个新的组件就被挂载了。

在元素或组件（如 key={uuid()} 或 onClick={handleClick()}）上调用的内联函数将在每次渲染时调用。在这种情况下，内联调用 uuid() 会为父组件的每次渲染生成一个新键，从而导致重新安装映射的子组件。

Answer 2

React.memo 避免了重新渲染。在您的手风琴函数中，尝试：

import {memo} from 'react';

const Accordion = (props) => {
    //your code
};

export default memo(Accordion);

将 Item 添加到列表后如何避免重新渲染？

2 个答案: