ReactJs AutoComplete 不显示在使用 antd 的下拉列表中

Question

我正在使用 API 创建一个具有自动搜索功能的组件。搜索值是成功的控制台日志记录。但不会显示在 React class 组件的自动搜索下拉列表中。

以下是我试过的方法

class AutoCompleteModel extends Component {

  state = {
    autcompleteOptions: [],
  };

  onSearchAutoComplete = async (text) => {
    console.log(text);
    await http
      .get("contact/autcomplete/" + text)
      .then((response) => {
        let i = response.data.result;
        this.setState({
          autcompleteOptions: i,
        });
        console.log(this.state.autcompleteOptions);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  render() {
    let { autcompleteOptions } = this.state;

    return (
      <>
        <Row>
          <Col
            xl={6}
            lg={6}
            md={6}
            sm={6}
            xs={24}
          >
            <AutoComplete
              options={this.state.autcompleteOptions}
              style={{
                width: "100%",
              }}
              placeholder="Auto complete search"
              onSearch={this.onSearchAutoComplete}
            >
           </AutoComplete>
          </Col>
        </Row>
      </>
    );
  }
}

export default AutoCompleteModel;

给我建议解决这个问题的最佳方法

Answer 1

我已经通过找出错误解决了这个问题。在下拉自动完成中显示的第一件事应该有一个数组的选项属性对象。应具有键名作为标签，以便在自动搜索中显示。

      { value: "light", label: "Light23" },
      { value: "bamboo", label: "Bamboo213" },

我所做的是发送带有列名称标签的 Json 响应，这解决了问题

ReactJs AutoComplete 不显示在使用 antd 的下拉列表中

ReactJs AutoComplete not showing on the dropdown using antd

reactjs

antd

ant-design-pro