小编jem*_*d04的帖子

我有一个包含对象数组的 JSON 文件，每个对象都包含“问题”和“答案”（我正在创建常见问题解答部分）。我正在做的是映射数组并显示问题列表，效果很好。每个问题旁边都有一个图标，我希望单击它时该图标会发生变化，但它会更改列表中的每个图标，而不仅仅是单击的一个项目。

我正在使用 Material UI 和钩子，这就是我设置 handleClick 的方式：

const [click, setClick] = useState(true);
const handleClick = () => {
   setClick(!click);
};

这就是我设置数组映射的方式：

<List
   style={{
     maxHeight: 430,
     width: 500,
     overflow: 'auto',
     border: '1px solid black',
        }}
      >
        {faqdata.map((item) => (
          <ListItem style={{ cursor: 'pointer' }}>
            <ListItemIcon>
              {click ? <AddIcon /> : <RemoveIcon />}
            </ListItemIcon>
            <ListItemText primary={item.Question} onClick={handleClick} />
          </ListItem>
        ))}
      </List>

如何才能使图标仅在我单击的列表项上而不是列表中的每个列表项上发生变化？我的 onClick 位置不正确吗？任何帮助将不胜感激。谢谢！