Question

我有来自Restful API的设备分页列表，例如名称，序列号等。
我使用 Axios 的get方法来获取列表。
看看 Reactjs 中的以下组件：

import * as React from 'react';
import axios from 'axios';

export interface Props{
  url: string;
}
export interface State{
  devices: string[];
  currentUrl: string;
}
class Devices extends React.Component<Props, State>{
    constructor(props: Props){
      super(props);
      this.state = {devices: [], currentUrl: props.url};
      console.log('first log',this.state);
    }
    componentDidMount() {
      axios.get(this.state.currentUrl)
        .then(({data}) =>{
          console.log('Joye Data', data);
          this.setState({devices: data.member})
          console.log('Devices',this.state.devices)
        })
        .catch(function (error){
          console.log('Error of Axios', error);
        })
    }
    render(){
      return(
        <ul>
        {this.state.devices.map(device => <li>{device.name}</li>)}
        </ul>
      );
    }

}

export default Devices;

除 render（）方法可捕获以下错误外，其他所有操作均正常：
“属性”名称不存在于“字符串”类型上

据我所知，如果我想使用Reactjs编译代码，我的意思是没有Typescript，上述代码应该可以正常工作，但是如何在不违反TS的情况下定义属性（React中的Props）约定？

注意：我搜索并找到了相同的问题，但他们的解决方案无法解决问题。

Answer 1

这是编译器错误。如果代码正常工作，则意味着类型指定不正确，并且TypeScript编译器已检测到该类型。

this.state.devices键入为以下一行的字符串数组：

devices: string[];

编译器期望device是此行的字符串，因为string被键入为字符串数组，所以推断出devices类型：

this.state.devices.map(device => <li>{device.name}</li>);

虽然device被明确用作对象，并且应该具有name属性。如果device确实是一个对象，则应该固定类型：

export interface State{
  devices: Array<{ name: string }>;
  currentUrl: string;
}

如何定义要避免的属性：类型“ Y”不存在属性“ X”

1 个答案: