Reactjs 切换箭头问题

你能帮我解决以下问题吗：我有一个react-Hooks组件，我想在单击跨度时切换箭头，它可以工作，但只有一次，当我再次单击它时，它不再工作，我不明白为什么？以下是我的组件：

const ViewDetails = () => {
  const [ expanded, setIsExpanded ] = useState(false)

  const info = expanded ? 'Hide details' : 'View details';

  return (
  <div className={styles.viewDetails}>
    <span 
    className={ expanded ? styles.expanded : undefined }
    onClick={() => !setIsExpanded(true)}
    >
      <DownArrow />
    </span>
  <span className={styles.viewDetails}>{info}</span>
  </div>
  )};

const ViewDetails=（）=>{
常量[expanded，setIsExpanded]=useState（false）
const info=expanded？'Hide details'：'View details'；
返回(
！setIsExpanded（true）}
>
{info}
)};

在span onClick中，尝试编写：

onClick={（）=>setIsExpanded（！expanded）}

您可以使用上一个状态值来切换

已扩展的

。对于所有情况，当前函数

{（）=>！setIsExpanded（true）}

将返回

true

解决方案

const toggle = () => setIsExpanded((val) => !val);

return (
  <div className={styles.viewDetails}>
    <span 
    className={ expanded ? styles.expanded : undefined }
    onClick={toggle}
    >
      <DownArrow />
    </span>
  <span className={styles.viewDetails}>{info}</span>
  </div>
  )};

const toggle=（）=>setIsExpanded（（val）=>！val）；
返回(
{info}
)};

---

Codesandbox示例--

谢谢，我使用了这个解决方案，效果非常好！