我将一个对象数组提取到我的react应用程序中。（对于每个对象）。单击该按钮时（任一对象的），我想更改该按钮的可见外观（比如说将按钮从“添加”更改为“已添加”）。当我单击对象1的按钮时，（它从“添加”更改为“已添加”）到现在为止没有问题。
但是，当我单击对象2或3（或除1之外的任何其他对象）的按钮时，1的按钮状态变回（从“已添加”变为“添加”）。但我想保留第1个按钮的状态。
下面是我的逻辑（我使用的是.ts）：

const sampleData = [
        {id : 1, name : 'Adam'},
        {id : 2, name : 'Stephanie'},
        {id : 3, name : 'Mark'},
        {id : 4, name : 'Catherine'},
        {id : 5, name : 'Kate'},
        {id : 6, name : 'Max'},
        {id : 7, name : 'Jacob'},
        {id : 8, name : 'John'}];
        
        export default function MyComponent () {
        
        const [ status, setStatus ] = useState<any>({
        animate : false,
        name : '' //just to distinguish which button is clicked I added a name prop for 
                  //comparison.
        });
        
    
    // below function is not giving me the dezired output
        const handleAddClick = ( name : string ) => {
        try {
           setStatus ((prevState : any) => ({
            status : {
               ...prevState.status,
               animate : true,
               name
        }})); 
        console.log(status)    
        } catch ( error : any ) {
                console.log ( error );
        }};
    
    // below function is also not giving me the desired output
    const handleAdd_Click = (name : string) => {
    try {
    setStatus ({
    ...status, 
    animate : true,
    name `// no need of using `name : name` as only `name` would suffice here`
    });
    } catch (error : any) {
    console.log(error);
    }
    }
        return (
         <>
        {SampleData.map((data) => (
        <Typography>{data.name} </Typography>
        <Button onClick = {() => handleAddClick(data.name)}
 className = { status.animate && status.name === data.name ? 'changeColor' : ''}> Add </Button>
        ))}
        </>
        )}

事实上，每一个以前点击的按钮。
我确实使用了'prevState'作为该按钮的setState逻辑，但是它不起作用。我尝试使用代码中提到的两个不同的函数，但是没有一个函数能够保留以前单击的按钮的状态（比如，当我们单击下一个按钮时，保留以前单击的按钮的className）。任何建议都是有帮助的