反應鈎條件渲染

Question

嘗試不渲染任何內容或根據 users 變量渲染 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
  );
};

即使用戶為空或未定義，它仍然顯示"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>
  );
};