React报错：Cannot read property 'useState' of null 问题求助

核心问题 #

你代码里的错误根源是混淆了Forge UI和React DOM的使用规则：Forge UI是Atlassian专为平台扩展打造的组件库，有独立的渲染系统和状态管理机制，不能直接混用React的原生状态钩子和表单处理逻辑。

具体错误点及修复 #

1. 状态管理错误
   你导入了React的useState，但Forge UI的视图函数不支持React原生状态钩子，必须使用@forge/ui提供的useState。

2. 表单提交逻辑错误
   Forge的Form组件onSubmit回调接收的是表单值对象，而非浏览器原生的event对象，所以event.target.countdown.value这种写法完全无效。

修正后的代码 #

import ForgeUI, { Button, Form, FormLayout, TextField, useState } from '@forge/ui';

export const runView = () => {
  const [countdown, setCountdown] = useState(0);

  const onSubmit = (formValues) => {
    // 直接从formValues中获取输入值
    const newCountdown = parseInt(formValues.countdown, 10);
    setCountdown(newCountdown);
  };

  return (
    <Form onSubmit={onSubmit}>
      <FormLayout>
        <TextField name="countdown" type="number" label="Countdown (in seconds)" />
        <Button type="submit">Start Countdown</Button>
        {countdown !== 0 && (
          <p>
            Time remaining: {countdown}
          </p>
        )}
      </FormLayout>
    </Form>
  );
};

额外说明 #

如果要实现真正的倒计时（每秒自动递减），还需要补充定时器逻辑，但要注意Forge的视图更新机制：需要用setInterval配合状态更新，同时在组件卸载时清理定时器（Forge中可以用useEffect，同样要导入@forge/ui里的版本）。

内容的提问来源于stack exchange，提问作者mikasa acker