React+TypeScript跨组件更新useState问题及报错解决

架构老林

2026-7-22

问题修复方案

问题背景

尝试在子组件中更新父组件的useState状态，Stackblitz示例勉强可用，但本地项目无法正常运行，存在两个核心问题：

点击提交按钮后页面持续刷新；
App.tsx中使用<Child onNameChange={setValue} />时出现TypeScript报错：'Child' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.

分步修复

1. 解决页面刷新问题

表单默认提交行为会触发页面跳转刷新，必须在提交事件中阻止这一默认行为。修改子组件的handleInputChange函数，接收事件参数并调用event.preventDefault()：

// Child.tsx 修改部分
const handleInputChange = React.useCallback((event) => {
  event.preventDefault(); // 阻止表单默认提交
  onNameChange('blue');
}, [onNameChange]);

2. 解决TypeScript类型报错问题

报错根源是子组件未定义Props类型，TS无法正确推断组件的返回类型。给子组件添加明确的Props类型定义即可解决：

// Child.tsx 添加类型定义
type ChildProps = {
  onNameChange: (value: string) => void;
};

// 给组件props指定类型
const Child = ({ onNameChange }: ChildProps) => {
  // ... 原有逻辑
};

完整修复代码

App.tsx

import * as React from 'react';
import Child from './Child';
import './style.css';

const App = () => {
  const [value, setValue] = React.useState('Red');

  return (
    <div>
      <div>{value}</div>
      <div>
        <Child onNameChange={setValue} />
      </div>
    </div>
  );
};

export default App;

Child.tsx

import * as React from 'react';
import './style.css';

type ChildProps = {
  onNameChange: (value: string) => void;
};

const Child = ({ onNameChange }: ChildProps) => {
  const handleInputChange = React.useCallback((event) => {
    event.preventDefault();
    onNameChange('blue');
  }, [onNameChange]);

  return (
    <div>
      <form onSubmit={handleInputChange}>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
};

export default Child;