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

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。如何避免这种情况?或者我如何在这种情况下使用useEffect。同样，我需要添加一个没有折叠的项目。这可能吗?如有任何帮助，不胜感激。

Answer 1

根据注释，映射的React元素应该被赋予唯一的、稳定的键，并在元素的整个生命周期中持续存在。当一个键发生变化时，对React来说，就意味着一个新的组件被挂载了。

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

Answer 2

备忘录避免了重新渲染。在Accordion函数中，尝试:

import {memo} from 'react';
const Accordion = (props) => {
//your code
};
export default memo(Accordion);