javascript - 按数字搜索时 Ant.design 自动完成错误

Question

我正在使用 ant design 创建一个更复杂的自动完成组件。我需要搜索并显示多个数据列。在这个例子中，我得到了两个名为 tax_id 和 legal_name 的列。用户可以同时搜索。当我用字母开始自动完成搜索时，没有问题，但是当我用数字开始搜索时（按 tax_id 搜索）Ant design 显示错误。

我尝试将输入值解析为字符串，但没有任何反应，我认为这可能是filterOption方法。此方法传递两个参数（值、选项）。value 是输入字段的当前值，option 是 DOM Node。我使用两者，第一个用于比较，第二个用于在自动完成值中输入内容。我不能使用filterOption默认值true，因为我有一个带有 div 的子组件来分隔内容。

<AutoComplete
  value={this.state.inputEnterprise}
  onSearch={val => {
    console.log(val);
    this.setState({
      inputEnterprise: val
    });
  }}
  onSelect={(val, opt) => {
    this.setState({
      inputEnterprise: opt.props.children.props.children[0]
    });
  }}
  filterOption={(val, opt) => {
    for (let i = 0; i < opt.props.children.props.children.length; i++) {
      const p = opt.props.children.props.children[i];
      if (
        p.props.children.toLowerCase().includes(val.toString().toLowerCase())
      ) {
        return true;
      }
    }
  }}
>
  {children}
</AutoComplete>;

子组件

const children = this.state.listOfEnterprises.map((s, i) => {
            return (
                <Option className="qwe" key={i}>
                    <div className="separator">
                        {this.state.keys.map((k, i) => {
                            return <div key={i}>{s[k]}</div>
                        })}
                    </div>
                </Option>
            )
        })

PS：这里的keys映射只是两个元素的数组，获取对象数组中的keys

this.state = {
    ...
    keys: ['tax_id', 'legal_name'],
}

这是一个代码框https://codesandbox.io/s/r-u4ko5
当我输入一个字符串时，一切都是正确的（如您所见，我有两个 div，一个带有 tax_id，另一个带有 legal_name） https://i .imgur.com/iB9b2GZ.png

当我输入一个整数时，自动输入显示 [Object object] https://i.imgur.com/2nSdOUF.png

index.js:171 显示了一个带有我写的数字的 console.log。但在那之后，提出这个错误 https://i.imgur.com/ZF4STGh.png

并显示下一个错误

Warning: Failed prop type: Invalid prop `inputValue` of type `object` supplied to `DropdownMenu`, expected `string`.
    in DropdownMenu (created by SelectTrigger)
    in SelectTrigger (created by Select)
    in Select (created by Context.Consumer)
    in Select (created by Context.Consumer)
    in AutoComplete (at recepcion/index.js:168)
    in div (created by Context.Consumer)
    in Col (at recepcion/index.js:157)
    in div (created by Context.Consumer)
    in Row (at recepcion/index.js:128)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at recepcion/index.js:127)
    in div (at recepcion/index.js:113)
    in Recepcion (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in div (at PanelLayout.js:18)
    in section (at PanelLayout.js:17)
    in div (at PanelLayout.js:13)
    in div (at PanelLayout.js:8)
    in PanelLayout (created by Context.Consumer)
    in Route (at RouteWithLayout.js:6)
    in RouteWithLayout (at routes/index.js:20)
    in Switch (at routes/index.js:13)
    in Unknown (at App.js:29)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at App.js:28)
    in Provider (at App.js:27)
    in Router (created by HashRouter)
    in HashRouter (at App.js:26)
    in App (at src/index.js:7) index.js:1375
    e index.js:1375
    printWarning checkPropTypes.js:21
    checkPropTypes checkPropTypes.js:76
    React 2
    getDropdownElement SelectTrigger.js:191
    render SelectTrigger.js:273
    React 12
    unstable_runWithPriority scheduler.development.js:255
    React 3

标签： javascriptreactjsantd

Answer 1

Optionvalues 需要是 type string，在你的情况下tax_id是 anumber所以你需要转换它 - <div key={i}>{String(s[k])}</div>。

这是您的代码的简化工作示例：

const dataSource = [
  {
    tax_id: 123,
    legal_name: 'asd'
  },
  {
    tax_id: 456,
    legal_name: 'qwe'
  }
];

const taxIds = dataSource.map(data => data.tax_id);
const legalNames = dataSource.map(data => data.legal_name);

const dataToAutoComplete = [
  { title: 'Tax IDs', data: taxIds },
  { title: 'Legal Names', data: legalNames }
];

const { Option, OptGroup } = AutoComplete;

const options = dataToAutoComplete.map(group => (
  <OptGroup key={group.title} label={group.title}>
    {group.data.map((value, i) => (
      <Option key={`${group.title}-${i}`} value={String(value)}>
        {String(value)}
      </Option>
    ))}
  </OptGroup>
));

export default class App extends React.Component {
  state = {
    value: ''
  };

  render() {
    return (
      <FlexBox>
        <AutoComplete
          value={this.state.value}
          onChange={value => {
            this.setState({ value });
          }}
          dataSource={options}
          filterOption
        />
      </FlexBox>
    );
  }
}