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的函数体（而不是简洁体）。

修复两个问题：

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>
  )
}

我在回调中的{{1}之前删除了{，在this.state.todos.map之后删除了{，并在{{1 }}以终止=>回调。（)没有相应的</li>)，因此我不必删除它们。）

旁注：在构造函数的map行中也存在语法错误。

映射函数在React中的嵌套三元运算符中的位置

1 个答案: