React中变量变更时组件样式未更新，求排查问题原因

你代码的核心问题是没有使用React的状态管理机制，而是用了普通变量x来控制样式：

• React不会自动监测普通变量的变化，当你点击按钮修改x的值时，组件并不会触发重新渲染，所以按钮的样式不会跟着更新。

修复后的代码 #

import React, { useState } from "react";

function App() {
  // 使用useState创建React状态变量，用于跟踪是否显示删除线
  const [isStriked, setIsStriked] = useState(false);
  
  // 切换状态的函数
  const strike = () => {
    setIsStriked(prevState => !prevState);
  }

  return (
    <button
      onClick={strike}
      // 根据状态决定是否应用删除线样式
      style={isStriked ? {textDecoration: "line-through"} : {}}
    >
      Buy Bughattis
    </button>
  )
}

关键改动说明 #

• 用useState钩子创建状态变量isStriked，React会自动跟踪这个变量的变化，状态更新时组件会重新渲染，样式也会随之改变。
• 更新状态时使用函数式更新（prevState => !prevState），确保每次切换都是基于最新的状态值，避免可能的状态不一致问题。
• 样式判断的分支返回空对象{}替代null，虽然React可以处理null样式，但空对象更符合React样式属性的常规写法，避免潜在渲染问题。

内容的提问来源于stack exchange，提问作者Agam dawra