Reactjs 无法在单个页面中添加多个AsyncTypeahead

我目前遇到一个问题，无法为创建的动态AsyncTypeahead分配动态选项

如何将选项作为动态添加到单个typeahead列表中

有人遇到过类似的问题吗？ 我已经强调了我们传递选项的位置

    Sample code:


    <AsyncTypeahead
                            labelKey="id"
                            **options={options}**
                            inputProps={{id:`${key}`}}
                            clearButton={true}
                            minLength={5}
                            isLoading={isLoading}
                            filterBy={filterByCallback}
                            onSearch={this.handleSearch}
                            placeholder="Search "
                            onChange={this.handleTypeAheadChange(key)}
                            renderMenuItemChildren={(option) => (
                                <div>
                                    {option.id} {option.name}
                                </div>
                            )}

                        />

     <AsyncTypeahead
                             labelKey="id"
                             **options={options1}**
                             inputProps={{id:`${key}`}}
                             clearButton={true}
                             minLength={5}
                             isLoading={isLoading}
                             filterBy={filterByCallback}
                             onSearch={this.handleSearch}
                             placeholder="Search "
                             onChange={this.handleTypeAheadChange(key)}
                             renderMenuItemChildren={(option) => (
                                 <div>
                                     {option.id} {option.name}
                                 </div>
                             )}

                        />


       <AsyncTypeahead
                               labelKey="id"
                               **options={options2}**
                               inputProps={{id:`${key}`}}
                               clearButton={true}
                               minLength={5}
                               isLoading={isLoading}
                               filterBy={filterByCallback}
                               onSearch={this.handleSearch}
                               placeholder="Search "
                               onChange={this.handleTypeAheadChange(key)}
                               renderMenuItemChildren={(option) => (
                                   <div>
                                       {option.id} {option.name}
                                   </div>
                               )}

                        />

/**/
 handleTypeAheadChange = name => values => {
    this.setState({
        [name]: values[0]
    });

}

示例代码：
(
{option.id}{option.name}
)}
/>
(
{option.id}{option.name}
)}
/>
(
{option.id}{option.name}
)}
/>
/**/
handleTypeAheadChange=name=>values=>{
这是我的国家({
[名称]：值[0]
});
}

您应该能够像对待

handleTypeAheadChange一样，对
handleSearch
采取类似的方法：

<AsyncTypeahead
  onSearch={this.handleSearch(key)}
  options={this.state[`options${key}`] || []}
  ...
/>

handleSearch = (key) => (query) => {
  /* Do async fetch... */

  this.setState({
    [`options${key}`]: results,
  });
}


handleSearch=（键）=>（查询）=>{
/*执行异步获取*/
这是我的国家({
[`options${key}`]：结果，
});
}
看来您的想法大体上是正确的。你的
handleTypeAheadChange
方法是什么样子的？@ericgio:谢谢你的回复。我已经按照要求编辑了我的帖子并添加了handleTypeAheadChange。如果onSearch允许传递事件，则问题可以解决，但问题是，onSearch只允许值：（键是动态的还是你在每种类型上手动设置的？）这是动态的。
键
值除了你的示例中的代码之外还有什么作用吗？为什么你不能将一个唯一的
名称
值传递给
HandletTypeaheadchange
并使用它呢？同样，设置相同的
id在所有三个typeaheads上。工作得很有魅力：D…我错过了这首曲子，handleSearch=（键）=>（查询）…再次感谢你…希望我的问题不坏：D