Saya berjuang dengan masalah kecil. Berharap seseorang dapat membantu saya di sini.

Ini adalah loop normal yang saya buat:

      { userLinks.map((item, i) => (
        <li key={i.toString()}>
          <a href={item.url} title={item.label}>
            <span>{item.label}</span>
          </a>
        </li>
      ))}

Ini berfungsi dengan baik, yang saya coba lakukan adalah memeriksa apakah userLinks > item.hideTrial = true Dan jika pengguna saat ini adalah pengguna percobaan:

const userdata = {
  userid: 921121,
  name: 'John',
  surname: 'Doe',
  fullname: 'John Doe',
  gender: 'mr',
  trial: true,
  expiredate: '14-07-2021',
};

Bahwa pengguna ini karena ini adalah pengguna percobaan, jangan tampilkan item di mana item.hideTrial === true

Bagaimana jika mencoba, tetapi tentu saja tidak berhasil:

      { userLinks.map((item, i) => {
        if (userdata.trial && item.hideTrial !== true) {
          return (
            <li key={i.toString()}>
              <a href={item.url} title={item.label}>
                <span>{item.label}</span>
              </a>
            </li>
          );
        }
          <li key={i.toString()}>
            <a href={item.url} title={item.label}>
              <span>{item.label}</span>
            </a>
          </li>;
      })}
0
Gurdt 12 Mei 2021, 11:18

2 jawaban

Jawaban Terbaik

Kembalikan null jika kondisinya true untuk tidak merender apa pun. Ini harus bekerja.

{
  userLinks.map((item, i) => {
    if (userdata.trial && item.hideTrial) return null;
    else
      return (
        <li key={i.toString()}>
          <a href={item.url} title={item.label}>
            <span>{item.label}</span>
          </a>
        </li>
      );
  });
}
1
Murli Prajapati 12 Mei 2021, 08:27

Pertama-tama jika Anda hanya ingin menunjukkan userLinks yang memenuhi kondisi Anda, Anda mungkin ingin menggunakan filter daripada map.

Kedua, jika Anda ingin menggunakan if di dalam html, harap pertimbangkan untuk menggunakan inline if seperti:

      { userLinks.map((item, i) => {
        userdata.trial && item.hideTrial !== true && (
            <li key={i.toString()}>
              <a href={item.url} title={item.label}>
                <span>{item.label}</span>
              </a>
            </li>
          )
          ...
      })}


Referensi: https://reactjs.org/docs/conditional -rendering.html#inline-if-with-logical--operator

0
sabasabo 12 Mei 2021, 08:29