1
votes

Méthode .find (): Comment puis-je renvoyer un booléen à la place de mon objet trouvé?

Je fais une sélection multiple et j'utilise un .find () avec la propriété cochée pour sélectionner la case à cocher lorsque la valeur est dans les deux tableaux .

Voici mon tableau de liste:

const permissionsGroupList = [
    { name: 'Seller' },
    { name: 'Admins' }
];

   const [groupPermissions, setGroupPermissions] = useState([]);

<Select
  labelId="mult-check-permissions"
  id="demo-mutiple-checkbox"
  multiple
  label="Grupo de permissÃµes"
  onChange={handleChangeGroupPermissions}
  value={groupPermissions}
  input={<Input disableUnderline={true} />}
  renderValue={selected => selected.join(", ")}
>
  {permissionsGroupList.map(permissionGroup => (
    <MenuItem key={permissionGroup.name} value={{ name: permissionGroup.name }}>
      <Checkbox
        checked={groupPermissions.find(
          group => group.name === permissionGroup.name
        )}
      />
      <ListItemText primary={permissionGroup.name} />
    </MenuItem>
  ))}
</Select>;

Dans ma méthode, .find () renvoie l'objet qui est trouvé, comment je peux renvoyer true / false à la place? Je reçois cette erreur car le composant Checkbox attend un booléen

index.js: 1 Avertissement: Type de prop échoué: prop coché non valide de type objet fourni à ForwardRef (case à cocher) , booléen attendu.

javascript reactjs

3 commentaires

Vous pouvez remplacer .find ( par .some (

Qu'en est-il de .includes ? developer.mozilla.org/en-US/ docs / Web / JavaScript / Reference /…

@evolutionxbox qui fonctionne également avec groupPermissions.includes (permissionGroup.name)

4 Réponses :

2
votes

Vous pouvez valider si elle a renvoyé une valeur avec !! .

Par exemple en utilisant comme suit:

const data = [1,2,3];

const result1 = !!data.find(e => e === 17);
const result2 = !!data.find(e => e === 2);

console.log(result1); // not found
console.log(result2); // found

Pensez au suivant:

<Checkbox checked={!!groupPermissions.find(
                     group => group.name === permissionGroup.name
                  )}
/>

J'espère que cela vous aidera!

0 commentaires

2
votes

Vous pouvez utiliser Array #some , qui est fait pour renvoyer un booléen.

checked={groupPermissions.some(
    group => group.name === permissionGroup.name
)}

0 commentaires

1
votes

Essayez ceci ci-dessous:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Vérifiez ce lien ici:

    <Checkbox
            checked={groupPermissions.some( group => group.name === permissionGroup.name
 ))}
    />

0 commentaires

1
votes

Vous pouvez utiliser le tableau une méthode () pour cela comme:

<Checkbox checked={!!groupPermissions.filter({name}=> name === permissionGroup.name).length}/>

La méthode some () teste si au moins un élément du tableau réussit le test implémenté par la fonction fournie. Il renvoie une valeur booléenne. Donc, cela sera utile dans ce scénario.

Vous pouvez également utiliser filter () et length propriété pour ceci comme:

<Checkbox checked={groupPermissions.some({name}=> name === permissionGroup.name)}/>

La méthode filter () crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie. Donc, s'il trouve permissionGroup.name dans le tableau groupPermissions , alors length sera une valeur> 0 et !! code > convertira cela en true , sinon vous obtiendrez false .

0 commentaires