如何在react js中避免空的动态li

{data.length > 0 && data.map(item => (
  <li key={item.id}>{item.name}</li>
))}

const [data, setData] = useState([]);

// 在获取数据后更新data
setData(response.data || []);

{data.length > 0 ? (
  data.map(item => (
    <li key={item.id}>{item.name}</li>
  ))
) : (
  <li>No data available</li>
)}