React Hook条件渲染

Question

尝试不呈现任何内容或呈现依赖于用户变量的DOM元素：

const Users = (props: UserProps) => {
  const [users, setData] = useState([]);

  useEffect(() => {
    ...
  }, []);

  return (
    users && (
      <span>
        <div className="padding-bottom-50">
          <div className="section-heading">
            New Users
          </div>

         <Users users={users} />

       </div>
      </span>
    ) || null
  );
};

即使当用户为null或未定义时，它仍显示"New Users"文本

Answer 1

Users是一个数组。因此，users &&将始终为真。

相反，应该检查用户的长度，如下所示。

const Users = (props: UserProps) => {
  const [users, setData] = useState([]);

  useEffect(() => {
    //
  }, []);

  if (users.length < 1) {
    return null;
  }

  return (
    <span>
      <div className="padding-bottom-50">
        <div className="section-heading">New Users</div>
        <Users users={users} />
      </div>
    </span>
  );
};