Question

当我尝试在React中运行我的代码时，我收到“属性”“ activationDate”在“从不”类型错误时不存在，这是什么问题？我确定它与Typescript有关。

编辑：导师类型仍然存在问题吗？不知道这意味着什么？

第二次编辑：供参考我正在按照本教程（https://alligator.io/react/axios-react/）进行简单的GET请求，我只是不知道如何将其转换为打字稿。

const TOKEN_KEY:string = `mpp-tk`;

type mentor = { activationDate: any }


class SamSearch extends React.Component<any>  {

  public state = {
    mentors: mentor[] // or any[]
  }

public componentDidMount() {
    const token = localStorage.getItem(TOKEN_KEY);
  const config = {
    headers: {
      Authorization : token
    }
  }

axios.get(`http://localhost:8080/findMentorFromSam/001339159`, config)
  .then(res => {
    console.log(res.data);
    const mentors = res.data;
    this.setState({ mentors });
  })


 }



public render(): React.ReactNode {
    const {
      classes
    } = this.props as any & {
      titleComponent?: React.Component
    };
return (

  <Grid container className={classes.test}>
  <ul>
  { this.state.mentors.map(mentor => <li>{mentor.activationDate}</li>)}
  </ul>
  <p>TEST</p>
  </Grid>



   )
  }
}
export default compose(
  withRouter,
  withStyles(styles)
)(SamSearch)

Answer 1

您必须说出阵列导师是什么类型，应该像

type Mentor = { activationDate: any }

class SamSearch extends React.Component<any>  {
  public state: { mentors: Mentor[] } = { // or any[]
    mentors: []
  }
  // ...rest of the class
}

Answer 2

public state = {
    mentors: mentor[] // or any[]
}

这不是有效的TypeScript-您不能在对象文字中声明类型。有效的方法是：

public state: { mentors: mentor[] } = {
    mentors: []
}

但是，如果您考虑使用React，这也是获得never的错误方式和原因-您应使用React.Component<TProps, TState>的第二个通用参数并按如下所示设置默认状态：

type SamSearchProps = {};
interface SamSearchState {
    mentors: mentor[];
}
class SamSearch extends React.Component<SamSearchProps, SamSearchState> {
    constructor(props: SamSearchProps) {
        super(props);
        this.state = { mentors: [] };
    }

    ~rest of component logic~
}

Answer 3

这可能是由您的打字稿设置引起的。如果您在strict中将true选项设置为tsconfig.json，则意味着它将严格检查更多类型：)您必须明确检查this.state.mentors是否为空或null。

此外，您可以通过编写type Props = {/*props here*/}来指定组件属性，然后将其应用于类声明class SamSearch extends React.Component<Props>，这样就可以避免诸如 const { classes } = this.props /* Not needed anymore: as any & { titleComponent?: React.Component }; */

属性在“从不”打字稿/反应类型上不存在

3 个答案: