React Axios Get请求报'name'不存在于string类型错误，如何声明对象类型？

问题根源 #

你当前的类型报错来自两个问题：

1. 初始化useState时传入了空字符串''，TypeScript自动推断gateway变量的类型为string，自然不存在name属性
2. 未给axios请求指定响应类型，TypeScript无法识别response.data的结构

具体修改方案 #

• 给useState添加泛型约束，明确gateway的类型为你定义的Gateway接口，初始值设为null（因为未发起请求时没有数据）
• 给axios.get传入泛型参数，声明接口返回的响应体结构为Gateway
• 渲染时使用可选链运算符处理初始空值的情况，避免运行时报错

修改后的完整代码 #

const Gateways: React.FC = () => {
  
  interface Gateway {
    id: number;
    name: string;
  }

  // 给useState指定泛型，初始值设为null
  const [gateway, setGateway] = useState<Gateway | null>(null);

  const handleClick = async () => {
    // 给axios.get指定响应泛型，明确返回的data是Gateway类型
    axios.get<Gateway>("my/url")
      .then((response) =>
        setGateway(response.data)
      ).catch(error=>console.log(error));
  };

  return (
    <div className="content">
      {/* 用可选链?.处理初始null的情况，避免运行时错误 */}
      <div>{ gateway?.name }</div>
    </div>
 )
};

export default Gateways;

补充说明 #

如果你不想用可选链，也可以加条件渲染，只有gateway存在的时候才渲染对应内容：

return (
  <div className="content">
    {gateway && <div>{ gateway.name }</div>}
  </div>
)

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