React状态变量命名疑问：自定义名称为何无法正常工作？

嘿，作为有JS/Java背景的React新手，能理解你刚接触状态时的困惑——先给你吃颗定心丸：React完全允许使用自定义名称的状态变量，而且支持同时定义多个状态变量！你遇到的「str不行、value行」的问题，肯定不是变量名本身的锅，大概率是代码里的细节出错了。

1. 自定义状态变量名完全合法 #

不管是类组件还是函数组件，状态变量的命名只要符合JavaScript变量命名规则（比如不能以数字开头、不能用关键字），想叫什么都可以。举个类组件的例子：

class DemoComponent extends React.Component {
  // 定义多个自定义名称的状态变量
  state = {
    str: "我是自定义名称的状态",
    userNickname: "React新手",
    clickCount: 0
  };

  render() {
    // 正常访问自定义名称的状态
    return (
      <div>
        <p>{this.state.str}</p>
        <p>昵称：{this.state.userNickname}</p>
      </div>
    );
  }
}

这段代码完全可以正常编译运行，所以「str」这个名字本身没有问题。

2. 为什么你的「str」版本不能正常工作？ #

你可以从这几个方向排查：

• 大小写拼写错误：JavaScript是大小写敏感的，如果你在渲染时写成了this.state.Str而不是this.state.str，就会取不到值；
• 直接修改state而非用setState：类组件里必须通过this.setState()更新状态，如果你直接写this.state.str = "新内容"，React不会触发组件重新渲染，看起来就像状态没生效；
• 渲染时未正确访问state：比如在JSX里直接写{str}而不是{this.state.str}，类组件里的状态必须通过this.state来访问。

3. 关于多个状态变量的定义 #

不管是类组件还是函数组件，都支持同时定义多个状态：

• 类组件：直接在state对象里添加多个键值对就行，像上面的例子里同时定义了str、userNickname、clickCount三个状态；
• 函数组件（useState）：可以多次调用useState钩子来定义多个独立状态：

function DemoFunctionComponent() {
  const [str, setStr] = useState("函数组件的自定义状态");
  const [clickCount, setClickCount] = useState(0);

  return (
    <div>
      <p>{str}</p>
      <button onClick={() => setClickCount(prev => prev + 1)}>点击次数：{clickCount}</button>
    </div>
  );
}

建议你再仔细对比一下两段代码的差异，重点检查状态的访问和更新方式，应该就能找到问题啦～

内容的提问来源于stack exchange，提问作者Ryan Cocuzzo