为什么错误消息不有条件地呈现？答案

【问题标题】：Why error message doesn't conditionally render?为什么错误消息不有条件地呈现？
【发布时间】：2023-02-21 20:53:49
【问题描述】：

用户名状态

const [username, setUsername] = useState({
    name: "",
    isValid: true,
    error_message:
      "start with a letter \n allowed characters: a-z A-Z 0-9 - and _ ",
  });

处理用户名函数

  function handleUsername(e) {
    const regexp = new RegExp(/[a-zA-Z][a-zA-Z0-9-_]{5,32}/gi);
    const name = e;
    const isValid = regexp.test(name);
    setUsername(() => {
      return {
        name: name,
        isValid: isValid ? true : false,
      };
    });
  }

jsx.

<div className={`error ${username.isValid ? "hidden" : ""}`}>
                {username.error_message}
              </div>

我如何根据 username.isValid 状态显示 div，div 的 className 中的条件似乎对状态变化没有反应。

【问题讨论】：

标签： reactjs react-hooks render conditional-rendering

【解决方案1】：

您可以使用 ternary operator 如果 username.isValid 是 falsy 值那么它将呈现 else 不是：

  {!username.isValid ? (
    <div className={`error ${username.isValid ? "hidden" : ""}`}>
      {username.error_message}
    </div>
  ) : null}

你可以看到这个CODESANDBOX

【讨论】：