React中嵌套三元运算符中map函数的放置

Question

下面是一个嵌套的三元运算符。如何放置 this.state.todos.map ((todo) => 使其起作用？我可以以某种方式简化这个吗？目前我有一个错误：意外的令牌，预期的“，”。如果 edit 为假，则先渲染 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>
    )
  }
}

Answer 1

两个问题：

您已经在表达式上下文中，因此您不想在 this.state.todos 之前使用 { 来输入表达式上下文。
你的 map 回调没有 return 值，因为你使用的是没有 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 之前的 { 和 => 之后的 {，并在 ) 之后添加了缺失的 ) =20=] 终止 map 回调。（{ 没有相应的 }，所以我不必删除它们。）

旁注：构造函数中的 this.state = 行也存在语法错误。

React中嵌套三元运算符中map函数的放置

Placement of map function in nested ternary operators in React

javascript

ternary-operator

ecmascript-6

reactjs