switch case JS的相同属性

Question

I'm using React and I don't want to reply <ListItem ...> code as many times as the cases are. There is a method to simplify and reduce this code?

   displayToDoList = () => {
        switch (this.state.sorted) {
            case 0:
                return (this.state.todosById.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;

            case 1:
                return (this.state.todosByName.map(todo =>
                    <ListItem
                        key={todo.id}                       
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;
            case 2:
                return (this.state.todosByCreatedAt.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;
            case 3:
                return (this.state.todosByCharcacters.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;

        }
    }

I think that there will be a better way than mine.

Answer 1

instead of case 0, 1, 2.. make this.state.sorted = 'todosById','todosByName',..

then just return

displayToDoList = () => {
return (this.state[this.state.sorted].map(todo =>
                    <ListItem
                        key={todo.id}                       
                        plainText={todo.plainText}
                        name={todo.name}/>))
}

Answer 2

const itemRenderer = todo =>
    <ListItem
        key={todo.id}
        plainText={todo.plainText}
        name={todo.name} />

switch (this.state.sorted) {
    case 0:
        return (this.state.todosById.map(itemRenderer)
    case 1:
        return (this.state.todosByName.map(itemRenderer)
    case 2:
        return (this.state.todosByCreatedAt.map(itemRenderer)
    case 3:
        return (this.state.todosByCharcacters.map(itemRenderer)
}

Answer 3

Ciao, I'm thinking something like:

displayToDoList = () => {
        let arrayToUse;
        switch (this.state.sorted) {
            case 0:
                arrayToUse = this.state.todosById;
                break;
            case 1:
                arrayToUse = this.state.todosByName;
                break;
            case 2:
                arrayToUse = this.state.todosByCreatedAt;
                break;
            case 3:
                arrayToUse = this.state.todosByCharcacters;
                break;

        }
        return (arrayToUse.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
    }

Answer 4

I would suggest more cleaner approach with object map lookup appraoch.

displayToDoList = () => {
    const sortedMap = {
      0: this.state.todosById,
      1: this.state.todosByName,
      2: this.state.todosByCreatedAt,
      3: this.state.todosByCharcacters,
     }
     const todoArr = sortedMap[this.state.sorted] || [];
     return todoArr.map(todo =>
                <ListItem
                    key={todo.id}
                    plainText={todo.plainText}
                    name={todo.name} />);       
}

The lookup time is O(1) here, hence i would prefer it over the array representation provided by domenikk

Answer 5

It can be simplified like this:

displayToDoList = () => {
    const types = ['todosById', 'todosByName', 'todosByCreatedAt', 'todosByCharcacters'];
    const todos = this.state[types[this.state.sorted]];

    return todos.map(todo =>
        <ListItem
            key={todo.id}
            plainText={todo.plainText}
            name={todo.name}/>
    );
}

Answer 6

displayToDoList = () => {

    // key could be id, date, name etc
   const todos = sortTodosBy(todos, key) 

    return todos.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>
        }
    }