Javascript 为使用同一处理程序动态创建的每个组件创建单独的状态

我有一个使用Material UI创建的React组件，子组件（

Paper

）是根据数组的项目数动态生成的

我必须更改悬停纸张的高程属性，以将其与其他纸张区分开来

在实际的应用程序中，我不知道数组中的项目数，因此我必须只为

mouseover

和

mouseout

使用一个事件处理程序，但我找不到一种方法将效果仅应用于悬停的项目，它将应用于所有项目。我怎样才能解决这个问题

这是我的代码（我正在使用React钩子）

import React，{useState}来自“React”
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Grid”导入网格；
从'@material ui/core/styles'导入{makeStyles}；
const useStyles=makeStyles（主题=>({
容器：{
背景颜色：'#f5'，
填充：主题。间距（2），
},
论文：{
填充：主题。间距（2），
},
}));
常量列表=（）=>{
const classes=useStyles（）；
const[elevation，setElevation]=useState（1）；
常量项=['a'，'b']；
常数paperHandleMouseOver=（evt）=>{
海拔高度（4）；
}
常数paperHandleMouseOut=（evt）=>{
海拔高度（1）；
}
报税表（
{
items.map（item=>
测试{item}
)
}                
)
}
导出默认列表

---

提前感谢

您可以尝试跟踪悬停纸张的索引，而不是高程，并使用它切换如下值：

const List=（）=>{
const classes=useStyles（）；
//const[elevation，setElevation]=useState（1）；//不需要再使用它了
const[selected，setSelected]=useState（）；//悬停跟踪的新状态
常量项=['a'，'b']；
//请注意需要传入索引的额外“（）=>”
常数paperHandleMouseOver=（i）=>（evt）=>{
//海拔高度（4）；
（i）第（i）款；
}
常数paperHandleMouseOut=（evt）=>{
//海拔高度（1）；
已选择的设置（空）；
}
报税表（
{items.map（（item，i）=>
测试{item}
)}                
)
}

import React, { useState } from 'react'
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    container : {
        backgroundColor: '#f5f5f5',
        padding: theme.spacing(2),  
    },
    paper: {
      padding: theme.spacing(2),         
    },
  }));

const List = () => {     
    const classes = useStyles();  
    const [elevation, setElevation] = useState(1);
    const items = ['a','b'];

    const paperHandleMouseOver = (evt) => {
        setElevation(4);
    }

    const paperHandleMouseOut = (evt) => {
        setElevation(1);
    }

    return(   
        <div className={classes.container}>
            <Grid container spacing={3}>
                {
                    items.map(item => 
                        <Grid item xs={12}>
                            <Paper elevation={elevation} onMouseOver={paperHandleMouseOver} onMouseOut={paperHandleMouseOut} className={classes.paper}>Test{item}</Paper>
                        </Grid>
                    )
                }                
            </Grid>  
        </div>           
    )
}

export default List