Размещение функции отображения во вложенных тернарных операторах в React - PullRequest
Новая
       16

Размещение функции отображения во вложенных тернарных операторах в React

0 голосов
/ 18 июня 2019

Ниже приведен вложенный троичный оператор. Как поставить this.state.todos.map ((todo) =>, чтобы оно работало? Я могу это как-то упростить? На данный момент у меня ошибка: неожиданный токен, ожидаемый ",". Если edit false, сначала выведите li. Если todo.date -> true визуализировать первый li, в противном случае визуализировать второй li Кто-то вам посоветует? Могу ли я применить такую ​​структуру? 

class App extends Component {
  constructor() {
    super();

    this.state = {
      todos:[
          {name:'as', desc:'sd', date:'05-04-2008},{name:'sd', desc:'', date: ''}],
      edit: false
    }
  }

  render() {

    return (
      <div>
        { this.state.edit ?
          (
            <Form

            />
          )

          :

          {this.state.todos.map((todo) => { //problem here                       
            (<li>
                {  todo["date"] ?
                <div>
                    <span>
                        todo["name"])
                    </span>
                    <span>
                        todo["desc"])
                    </span>
                </div>

                :

                <div>
                    <span>
                        todo["name"])
                    </span>
                </div>  
                }
            </li>)
        }
      </div>
    )
  }
}

1 Ответ

4 голосов
/ 18 июня 2019

Две проблемы:

  1. Вы уже в контексте выражения, поэтому вы не хотите использовать { до this.state.todos длявведите контекст выражения.

  2. Ваш обратный вызов map не возвращает значение, поскольку вы используете тело функции (а не краткое тело) без return.

Исправление: 

render() {

  return (
    <div>
      { this.state.edit ?
        (
          <Form

          />
        )

        :
//      v---- *** no { here
        this.state.todos.map((todo) => // *** No { here
          (<li>
            {  todo.date ?
            <div>
                <span>
                    {todo.name}
                </span>
                <span>
                    {todo.desc}
                </span>
            </div>

            :

            <div>
                <span>
                    {todo.name}
                </span>
            </div>  
            }
          </li>)
        ) // *** Added missing ) here
      }
    </div>
  )
}

Я удалил { до this.state.todos.map и { после => в обратном вызове и добавил впропущенный ) после </li>) для завершения обратного вызова map.(У { не было соответствующих }, поэтому мне не нужно было их удалять.)

Примечание: в строке this.state = есть синтаксическая ошибкаваш конструктор.

...