Javascript 在react中的multiselect中设置默认值

我使用React引导程序Typeahead库（）。我的问题是基于索引

this.state.todo

我需要在

this.state.todo

中找到具有给定索引的对象。在multiselect中将找到的对象的名称显示为默认值

此处演示：

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
托多：[{id:1，名字：'Paul'}，{id:2，名字：'Martin'}，{id:3，名字：'Jacob'}]，
待办事项：[1,3]，
selectedItems:[]
};
}
handleSelect=项目=>{
this.setState（{selectedItems:items}）；
};
render（）{
返回(
);
}
}
类Todos扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
var tempArr=this.props.todos.filter（项=>！this.props.todo.includes（项））；
返回(
);
}
}

我想你在找这个

let selected = this.state.todos.map( (todo, index) => {
   if(this.state.todo.includes(index)){  //compare based on index
      return todo
   }
})

---

如果要基于

this.state.todos

中的

id

进行比较

let selected = this.state.todos.map( (todo, index) => {
   if(this.state.todo.includes(todo.id)){  //compare based on id in this.state.todos
      return todo
   }
})

---

更新

根据您的演示示例，您只需在

应用程序

组件中设置

selectedItems

，并将其传递给

Todos

组件

componentDidMount(){
    //Based on index
    this.setState({
      selectedItems: this.state.todos.filter( (todo, index) => this.state.todo.includes(index))
    })

    //Based on id in this.state.todos
    // this.setState({
    //   selectedItems: this.state.todos.filter( (todo, index) => this.state.todo.includes(todo.id))
    // })
}

注意：这里需要使用

过滤器，而不是
map

将
selectedItems
传递到
Todos
组件

<Todos 
    todos={this.state.todos}
    todo={this.state.todo}
    handleSelect = {this.handleSelect}
    selectedItems = {this.state.selectedItems}  //Pass selectedItems here
/>

我想你在找这个

let selected = this.state.todos.map( (todo, index) => {
   if(this.state.todo.includes(index)){  //compare based on index
      return todo
   }
})


如果要基于
this.state.todos
中的
id
进行比较

let selected = this.state.todos.map( (todo, index) => {
   if(this.state.todo.includes(todo.id)){  //compare based on id in this.state.todos
      return todo
   }
})


更新

根据您的演示示例，您只需在
应用程序
组件中设置
selectedItems
，并将其传递给
Todos
组件

componentDidMount(){
    //Based on index
    this.setState({
      selectedItems: this.state.todos.filter( (todo, index) => this.state.todo.includes(index))
    })

    //Based on id in this.state.todos
    // this.setState({
    //   selectedItems: this.state.todos.filter( (todo, index) => this.state.todo.includes(todo.id))
    // })
}

注意：这里需要使用
过滤器，而不是
map

将
selectedItems
传递到
Todos
组件

<Todos 
    todos={this.state.todos}
    todo={this.state.todo}
    handleSelect = {this.handleSelect}
    selectedItems = {this.state.selectedItems}  //Pass selectedItems here
/>

我认为问题是因为todo是一个对象数组，而todo是一个整数数组，因此当您执行筛选时，它将不起作用，您必须使用todos.id。例：

var tempArr = this.props.todos.filter(item => !this.props.todo.includes(item.id));

我认为问题是因为todos是一个对象数组，todo是一个整数数组，因此当您进行筛选时，它将不起作用，您必须使用todos.id。例：

var tempArr = this.props.todos.filter(item => !this.props.todo.includes(item.id));

Hi Umbro，检查我的解决方案并让我知道这是否有帮助。Hi Umbro，检查我的解决方案并让我知道这是否有帮助。