Question

我正在与蚂蚁设计一起创建一个更复杂的自动完成组件。我需要搜索并显示多个数据列。在此示例中，我得到了两列，分别称为tax_id和legal_name。用户可以通过两者进行搜索。当我用字母开始自动完成搜索时，没有问题，但是当我用数字开始搜索（按tax_id搜索）时，Ant设计显示一个错误。

我尝试将输入值解析为字符串，但是什么也没有发生，我认为这可能是filterOption方法。此方法传递两个参数（值，选项）。值是输入字段的当前值，选项是DOM节点。我同时使用第一个进行比较，第二个在自动完成值中输入内容。我无法使用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：在这种情况下，键映射仅是由两个元素组成的数组，以获取对象数组中的键

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

Answer 1

Option的值必须为string类型，在您的情况下tax_id是number，因此您需要将其转换为<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>
    );
  }
}

按数字搜索时蚂蚁设计自动完成错误

1 个答案: