Question

在他们的文档示例中，它显示了以下内容：

<AsyncTypeahead
  onSearch={query => (
    fetch(`https://api.github.com/search/users?q=${query}`)
      .then(resp => resp.json())
      .then(json => this.setState({options: json.items}));
  )}
  options={this.state.options}
/>

我有一个位于容器中的函数，通过Redux“action”返回一个郊区列表。

我首先遇到构建“fetch”命令的麻烦，以便将返回郊区设置为“选项”对象。

其次，我在设置AsyncTypeahead组件时也遇到了问题。

这是我的fetch语句 - APi返回结果，但我对选项“unused label”有语法错误。

   const task = fetch('/api/SelectData/QuerySuburbs' + queryString, {
    method: 'GET',
    headers: headers,
  })
    .then(handleErrors)
    .then(response => response.json())
    .then(response =>  {options: response}))
      console.log('response ', response)

这是我的函数应该返回选项...我怀疑它没有，至少不是AsyncTypeahead要求的格式..

  handleSuburbSearch = (query) => {
    const {selectData} = this.props
    const companyStateId = selectData.companyStateId

    if (!query) {
      return;
    }
    const queryString = {
      query: query,
      companyStateId: companyStateId,
    }
    const suburbs = getSuburbs(queryString)
    return suburbs
  };

以下是我的AsyncTypeahead的结构方式：

<AsyncTypeahead
  name={name}
  onSearch= {query => (handleSuburbSearch(query))}
  renderMenuItemChildren={(options) => renderMenuItemChildren(options)}
  placeholder="Select Suburb"
/>

所以上面的内容实际上开始了搜索 - 然后我们从API获取数据然后它就会丢失。

我遇到了Fetch结构的问题，以便返回一个“options”对象，而且我相信，我采用基本的AsyncTypeahead语法结构的方式...

我应该如何构建Fetch以便它返回选项？

如何构建AsyncTypeahead以显示检索到的结果？

参考

我一直在使用React-Bootstrap-Typeahead中的this示例：

 const AsyncExample = React.createClass({
  getInitialState() {
    return {
      allowNew: false,
      multiple: false,
      options: [],
    };
  },

  render() {
    return (
      <div>
        <AsyncTypeahead
          {...this.state}
          labelKey="login"
          onSearch={this._handleSearch}
          placeholder="Search for a Github user..."
          renderMenuItemChildren={this._renderMenuItemChildren}
        />
        {this._renderCheckboxes()}
      </div>
    );
  },

  _renderCheckboxes() {
    const checkboxes = [
      {label: 'Multi-Select', name: 'multiple'},
      {label: 'Allow custom selections', name: 'allowNew'},
    ];

    return checkboxes.map(({label, name}) => (
      <Checkbox
        checked={this.state[name]}
        key={name}
        name={name}
        onChange={this._handleChange}>
        {label}
      </Checkbox>
    ));
  },

  _renderMenuItemChildren(option, props, index) {
    return (
      <div key={option.id}>
        <img
          src={option.avatar_url}
          style={{
            height: '24px',
            marginRight: '10px',
            width: '24px',
          }}
        />
        <span>{option.login}</span>
      </div>
    );
  },

  _handleChange(e) {
    const {checked, name} = e.target;
    this.setState({[name]: checked});
  },

  _handleSearch(query) {
    if (!query) {
      return;
    }

    fetch(`https://api.github.com/search/users?q=${query}`)
      .then(resp => resp.json())
      .then(json => this.setState({options: json.items}));
  },
});

以及文档区域中的This示例。

<AsyncTypeahead
  onSearch={query => (
    fetch(`https://api.github.com/search/users?q=${query}`)
      .then(resp => resp.json())
      .then(json => this.setState({options: json.items}));
  )}
  options={this.state.options}
/>

React-Bootstrap-Typeahead故障渲染数据返回

0 个答案: