类型 'void' 不能分配给类型 '((event: MouseEvent<HTMLInputElement>) => void) | 不明确的'

IT技术 javascript reactjs typescript

2021-04-18 17:07:02

   import * as React from "react";
   import "./App.css";
   import PageTwo from "./components/PageTwo";

    export interface IPropsk {
        data?: Array<Items>;
        fetchData?(value: string): void;
    }

    export interface IState {
       isLoaded: boolean;
       hits: Array<Items>;
       value: string;
    }
    class App extends React.Component<IPropsk, IState> {
        constructor(props: IPropsk) {
        super(props);

        this.state = {
        isLoaded: false,
        hits: [],
        value: ""
        this.handleChange = this.handleChange.bind(this);
  }   

  fetchData = val => {
        alert(val);
  };

  handleChange(event) {
       this.setState({ value: event.target.value });
  }


  render() {
   return (
      <div>
        <div>
           <input type="text" value={this.state.value} onChange= {this.handleChange}
           <input type="button" onClick={this.fetchData("dfd")} value="Search" />
      </div>
     </div> 

    );

  }
}

 export default App;

在上面的代码示例中，我尝试通过单击带有参数的按钮来调用方法（fetchData）。但是我从以下行给出了错误

 <input type="button" onClick={this.fetchData("dfd")} value="Search" />

错误是

类型 'void' 不能分配给类型 '((event: MouseEvent) => void) | 不明确的'。

5个回答

在您的代码中，this.fetchData("dfd")您正在调用该函数。函数返回void。void与onClick期望函数的不可组合。

使固定

创建一个调用 fetchData 例如的新函数onClick={() => this.fetchData("dfd")} 。

更多的

这是 TypeScript 防止的一个非常常见的错误🌹

您收到该错误不是因为 TypeScript，而是因为 TsLint。您可以调整 Linter 或更改您的方法。

2021-05-23 17:07:02

<input type="button"onClick={() => this.fetchData("dfd")} value="Search" /> 我在上面添加了这一行，但得到以下错误在 JSX 属性中禁止 Lambdas 由于它们渲染性能影响

2021-06-03 17:07:02

提醒一下，链接不再有效（被重定向）。

2021-06-04 17:07:02

在渲染中使用 => 是不是很糟糕？

2021-06-12 17:07:02

@ClaudiuCreanga 它可以强制不必要的重新渲染，这就是为什么它经常被避免。请参阅此处的解释：jonhilton.net/typescript-and-react-forbidden-lambdas

2021-06-16 17:07:02

使用功能组件，我们使用React.MouseEvent并清除了......

const clickHandler = () => {
  return (event: React.MouseEvent) => {
    ...do stuff...
    event.preventDefault();
  }
}

你也可以做类似的事情

fetchData = (val: string) => (event: any) => {
  alert(val);
};

或者，您可以为您的设置类型event，例如React.MouseEvent. 您可以在此处阅读更多相关信息。

你可以这样设置类型，你不会得到任何错误

export interface IPropsk {
    data?: Array<Items>;
    fetchData?(): (value: string) => void;
}

正如@basarat上面所说，当您有类似的东西时，您button.onclick = thisFunction();已经在调用该函数。您可能只想分配该功能而不是调用它，

所以你会这样写button.onclick = thisFunction;。

其它你可能感兴趣的问题

上一篇Typescript 和 Jest：避免模拟函数的类型错误下一篇带有 MUI 的 CSS 伪选择器