reactjs - Semantic-ui-react：React/TypeScript 和 Redux 的自定义搜索问题

Question

我正在尝试将自定义渲染用于搜索框。我正在使用语义 UI 反应：0.82.5 和打字稿：2.9.1。和 Redux/

我有以下错误：

Type '{ fluid: true; loading: any; results: { id: number; name: string; team: number; location: string;...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<SearchProps, ComponentState, any>> & Rea...'.
Type '{ fluid: true; loading: any; results: { id: number; name: string; team: number; location: string;...' is not assignable to type 'Readonly<SearchProps>'.
Types of property 'resultRenderer' are incompatible.
Type '({ id, name, team, location, type }: { id: any; name: any; team: any; location: any; type: any; }...' is not assignable to type '(props: SearchResultProps) => ReactElement<any>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'SearchResultProps' is not assignable to type '{ id: any; name: any; team: any; location: any; type: any; }'.
Property 'name' is missing in type 'SearchResultProps'.",

下面是我的代码的摘录。我究竟做错了什么？

const result = [{
  id: 73421,
  name: "cn-sonar-16",
  team: 124,
  location: "RTP",
  type: "sonarqube-account-rep" 
}];

@CSSModules(styles, options)
export class ServicesOverview extends React.Component<any, any> {

  public resultRenderer = ({ id, name, team, location, type }) => 
    <div key='content' className='content'>
      <div> {name}</div>
      <div> {team}</div>
      <div>{location}</div>
      <div >{type}</div>
    </div>;  
...  (omitting code for clarity)
render(){
...
<div styleName="search-container">
                <Search
                  fluid
                  loading={services.searching}
                  results={result}
                  value={services.searchText}
                  onSearchChange={_.debounce(this.handleSearchChange, 500, {
                    leading: true
                  })}
                  onResultSelect={this.handleResultSelect}
                  resultRenderer={this.resultRenderer}
                />
</div>
...

const mapStateToProps = state => {
  return {
    services: state.services,
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ServicesOverview);

标签： reactjstypescriptreact-reduxsemantic-ui-react

Answer 1

我认为这是因为您的结果没有输入。并且any没有属性name

尝试添加：

interface Result {
  id: number
  name: string
  team: number
  location: string
  type: string
}

...

public resultRenderer = ({ id, name, team, location, type }: Result) => 

...