javascript - 使用 map 过滤但保留索引

Question

我想过滤然后映射对象数组，但是什么时候过滤器会创建一个新数组并给我不同的索引，可以使用过滤器来完成此操作，还是应该使用其他方式。

this.props.todos = [
          {
            task:'Daily meet',
            status:'incomplete'
          },
          {
            task:'Play videogame'
            status:'complete'
          }
]

this.props.todos.filter(todos => todos.status === 'complete').map((todos, i) => {

 return (<p>{todos.status} - Everythin Ok</p>)
 //here i got i = 0

}));
this.props.todos.filter(todos => todos.status === 'incomplete').map((todos, i) => {

  return (<p>{todos.status} - You have some task incomplete</p>)
  //and here i got i = 0 too i wanna this to be like the original array
}));

Answer 1

直接使用map即可，无需过滤。您可以像这样返回任一组件:

this.props.todos = [
  {
    task: 'Daily meet',
    status: 'incomplete'
  },
  {
    task: 'Play videogame'
    status: 'complete'
  }
]

this.props.todos.map(todo => {
  if (todo.status === 'complete') {
    return (<p>{todo.status} - Everythin Ok</p>);
  }

  if (todo.status === 'incomplete') {
    return (<p>{todo.status} - You have some task incomplete</p>);
  }

  return null;
})