对 this.props.history.push 使用流失败的反应类型检查答案

【问题标题】：React type checking using flow failing for this.props.history.push对 this.props.history.push 使用流失败的反应类型检查
【发布时间】：2023-03-20 04:39:02
【问题描述】：

我正在使用 React 中的流进行类型检查。我在以下情况下遇到错误，如何处理 this.props.history.push('/home') 如何在道具中定义它？我已经尝试如下，但它不起作用，

type Prop = { onLoginSuccess: function, setContextDetails: function, callErrorLogger: function, history:string, push:string }; 
type State = { username: string, password: string, loginsuccess: bool, isLoading: bool }; 
class Login extends React.Component<Prop, State> {
// here I have some code
this.props.history.push('/home') ;
 }

【问题讨论】：

标签： reactjs flowtype

【解决方案1】：

我清理了您的一些代码和类型，使其更适合流语法。但这应该可行。

基本上，您定义 history 类型的方式与定义普通对象的方式相同，并且您的 push 函数可以使用 Function 或更严格地使用我在下面使用的箭头函数语法声明。

type Prop = {
  onLoginSuccess: Function,
  setContextDetails: Function,
  callErrorLogger: Function,
  history: {
    push: (string) => void,
  },
};

type State = {
  username: string,
  password: string,
  loginsuccess: boolean,
  isLoading: boolean,
};

class Login extends React.Component<Prop, State> {
  // here I have some code
  onClick() {
    this.props.history.push('/home');
  }
}

这是一个试用流程，供您查看正在运行的类型。 https://flow.org/try/#0JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQdMAnmFnAArFhwC8cA3nThwIAOwAyEAObBRAZQCuuXFlSoAXHABiC0fmBiANELiosMAMJiYWAB4wAIueTAANhu279Rk7mSvXAFEoYihJKSksKE0dPRgDUWNhAAtgVBhoJk1BYWEwBVRkzQAKdKhZKQBKXgA+OAA3CGAAEyS4AF9jdvpGFjY5GGQbXgETAqjRZBAsTTKKtrA0VAB3aGbZmHLRKTbXaVlUJRU1TQAjCAhXHESTNMlkZoqzi6vkG+6hOlxXJbhw2Tgdhsoma6GweBgADorOAxFhRDAADycCBgQxwAZDLB1HJwAD0eLgySibAAkkTkPU2KgSGxcBBmlgTGILK5gLgANbFaq44QwVKoSFgLiCgUZKBMIUFZLFMh45K0siVejCdp0dpwIA

我还建议您以后将帖子标记为flowtype，这应该会得到您的更多帮助。

【讨论】：