React TSX组件中更新接口类型Props数据的问题求助

React 里的 props 天生是只读的，这是框架的核心设计规则，TypeScript 的报错只是把这个规则做了显性的类型校验而已——你没法直接修改父组件传递过来的 props 值。

根据你的数据使用场景，有两种常用的处理方式：

方案1：将 props 转为组件内部状态（适合数据仅当前组件使用） #

如果 firstName 只需要在当前组件内更新和展示，你可以把 props 的值存入组件自己的状态，之后通过更新状态来改变显示内容。

类组件示例 #

interface ISummaryStats {
  firstName: string;
  // 其他属性...
}

class SummaryStats extends React.Component<ISummaryStats> {
  // 初始化内部状态，把props值转存进来
  state = {
    firstName: this.props.firstName
  };

  handleUpdate = async () => {
    // 调用API获取新数据
    const newData = await fetch('/api/get-new-name').then(res => res.json());
    // 更新内部状态，而非props
    this.setState({ firstName: newData.firstName });
  };

  render() {
    return (
      <div>
        <p>当前名称：{this.state.firstName}</p>
        <button onClick={this.handleUpdate}>更新名称</button>
      </div>
    );
  }
}

函数组件示例（现代推荐写法） #

import { useState, useEffect } from 'react';

interface ISummaryStats {
  firstName: string;
  // 其他属性...
}

const SummaryStats = (props: ISummaryStats) => {
  // 用useState将props转为内部状态
  const [firstName, setFirstName] = useState(props.firstName);

  // 可选：如果父组件更新了props，自动同步到内部状态
  useEffect(() => {
    setFirstName(props.firstName);
  }, [props.firstName]);

  const handleUpdate = async () => {
    const newData = await fetch('/api/get-new-name').then(res => res.json());
    setFirstName(newData.firstName);
  };

  return (
    <div>
      <p>当前名称：{firstName}</p>
      <button onClick={handleUpdate}>更新名称</button>
    </div>
  );
};

方案2：让父组件管理状态（适合数据多组件共享） #

如果 firstName 是父组件传递的，且其他组件也需要使用这个数据，应该把更新逻辑交给父组件，子组件通过回调函数通知父组件更新数据。

示例代码 #

// 父组件：负责状态管理和API调用
const ParentComponent = () => {
  const [firstName, setFirstName] = useState('初始名称');

  const handleNameUpdate = async () => {
    const newData = await fetch('/api/get-new-name').then(res => res.json());
    setFirstName(newData.firstName);
  };

  return (
    <div>
      <SummaryStats firstName={firstName} onUpdateName={handleNameUpdate} />
    </div>
  );
};

// 子组件接口：新增回调函数属性
interface ISummaryStats {
  firstName: string;
  onUpdateName: () => void;
  // 其他属性...
}

// 子组件：仅负责展示和触发更新事件
const SummaryStats = (props: ISummaryStats) => {
  return (
    <div>
      <p>当前名称：{props.firstName}</p>
      <button onClick={props.onUpdateName}>更新名称</button>
    </div>
  );
};

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