这个挑战涉及状态或道具或 React 中的任何名称

Question

import React from "react"

export default function App() {
    const [messages, setMessages] = React.useState([])
    function messCount(){
        setMessages(prevMessage => prevMessage.length)
    }
    /**
     * Challenge:
     * - Only display the <h1> below if there are unread messages
     */
    return (
        <div>
            {messages.length && <h1>You have {messages.length} unread messages!</h1>}
        </div>
    )
}

这是代码和注释掉的挑战，我不知道该怎么做，请帮忙

我尝试设置第二个状态，默认值为整数 0，然后我尝试将大括号插入到 jsx 标记中，但它并没有真正起作用

Answer 1

根据对上述问题的评论，听起来您要问的具体问题是：

如果我删除数组中的所有项目，屏幕上会有一个零

这似乎来自于：

{messages.length && <h1>You have {messages.length} unread messages!</h1>}

代码成功将

messages.length

解释为 falsy 并且不输出

<h1>

元素。然而，

messages.length

itself的值仍然是这个表达式的结果，并且React正在显示该结果。

您可以将其扩展为三元条件运算，以在值为假时控制表达式的结果。例如：

{messages.length ? <h1>You have {messages.length} unread messages!</h1> : null}

在这种情况下，

null

将是当

messages.length

为

0

时表达式的结果，React不会为其输出任何内容。