Menu Docs
Página inicial do Docs
/
MongoDB Atlas
/
Atlas Device SDKs
/
React Native SDK
/
Dados do modelo
/
Tipos de dados

Dicionários - Reagir SDK nativo

Nesta página

  • Realm Object Models
  • Criar um objeto com um valor de dicionário
  • Consulta para objetos com propriedade de dicionário
  • Atualizar um dicionário
  • Excluir membros de um dicionário

Novidades na versão realm@10.5.0.

Você pode usar o tipo de dadosRealm.Dictionary para gerenciar uma collection de chaves de string únicas emparelhadas com valores. Os dictionary dados mapeiam para o objeto Javascript tipo.

Por exemplo, criar um objeto de Realm HomeOwner onde a propriedade home é definida como um tipo dictionary poderia ter esta aparência:

realm.create('HomeOwner', {
  name: 'Anna Smith',
  home: {address: '2 jefferson lane', yearRenovated: 1994, color: 'blue'},
});

Realm Object Models

Você pode definir um dicionário de valores mistos para um Realm object model de três maneiras:

  • Definir o tipo de dados do seu campo para um objeto vazio, "{}".

  • Adicionar o tipo de dados antes dos colchetes para criar um dicionário com valores de um tipo específico. Por exemplo, "int{}" para especificar que os valores do dicionário devem ser inteiros ou "string{}" para especificar que os valores do dicionário devem ser strings.

  • Definir o tipo de objeto explicitamente. Isso é necessário para usar tipos de objeto em seu Realm como valores de dicionário.

class HomeOwner extends Realm.Object {
  static schema = {
    name: 'HomeOwner',
    properties: {
      name: 'string',
      home: '{}',
      pets: {
        type: 'dictionary',
        objectType: 'Pet',
        optional: true,
      },
    },
  };
}

Use uma interface que estende o Realm.Dictionary tipo para definir a sintaxe do seu objeto de dicionário. Todos os seus Realm Objects para essa classe devem seguir a sintaxe especificada na interface.

interface Home extends Realm.Dictionary {
  address?: string;
  color?: string;
  price?: number;
  yearRenovated?: number;
}
class HomeOwner extends Realm.Object<HomeOwner> {
  name!: string;
  home!: Home;
  pets?: Pet[];
  static schema: ObjectSchema = {
    name: 'HomeOwner',
    properties: {
      name: 'string',
      home: 'mixed{}',
      pets: {
        type: 'dictionary',
        objectType: 'Pet',
        optional: true,
      },
    },
  };
}

O Realm não permite o uso de . ou $ caracteres em chaves de mapa. Você pode usar a codificação e a decodificação percentual para armazenar uma chave de mapa que contenha um desses caracteres não permitidos.

// Percent encode . or $ characters to use them in map keys
const mapKey = "kitchen.windows";
const encodedMapKey = mapKey.replace(".", "%2E");

Criar um objeto com um valor de dicionário

No exemplo CreateHomeOwner seguinte, criamos um novo objeto com uma propriedade de dicionário.

O componente CreateHomeOwner faz o seguinte:

  • Criar React que representa o nome e endereço do proprietário, respectivamente.

  • Conseguir acesso a uma instância de Realm aberta chamando o hook useRealm() dentro do componente.

  • Crie um método de componente SubmitHomeOwner() que execute uma transação de escrita e crie um novo objeto HomeOwner com base nos valores TextInput para o nome e o endereço do proprietário, respectivamente.

  • Adicionar um onPress evento no botão enviar que chama SubmitHomeOwner()

1const CreateHomeOwner = () => {
2  const [homeOwnerName, setHomeOwnerName] = useState('John Smith');
3  const [address, setAddress] = useState('1 Home Street');
4  const realm = useRealm();
5
6  const submitHomeOwner = () => {
7    // Create a HomeOwner realm object within a Write Transaction
8    realm.write(() => {
9      realm.create('HomeOwner', {
10        name: homeOwnerName,
11        // For the dictionary field, 'home', set the value
12        // to a regular JavaScript object
13        home: {
14          address,
15        },
16      });
17    });
18  };
19  return (
20    <View>
21      <TextInput
22        value={homeOwnerName}
23        onChangeText={text => setHomeOwnerName(text)}
24      />
25      <TextInput value={address} onChangeText={text => setAddress(text)} />
26      <Button
27        title='Submit Home Owner'
28        onPress={submitHomeOwner}
29      />
30    </View>
31  );
32};

Consulta para objetos com propriedade de dicionário

Para filtrar uma consulta, execute collection.filtered() para especificar um subconjunto de resultados com base nos valores de uma ou mais propriedades de objeto. Você pode especificar resultados com base no valor das propriedades de um dicionário usando a notação entre colchetes.

Você também pode determinar se uma coleção de resultados tem uma determinada chave ou valor utilizando <dictionary>.@keys ou <dictionary>.@values. Por exemplo, se você tivesse uma coleção HomeOwner com um dicionário home aninhado, poderia retornar todos os objetos HomeOwner com home com uma propriedade "price" executando a consulta: home.@keys = "price".

Exemplo

No exemplo HomeList a seguir, consultamos objetos que possuem propriedades de dicionário.

O componente HomeList faz o seguinte:

  • Executa uma consulta para todos os proprietários, passando a classe HomeOwner para o hook useQuery.

  • Executa uma consulta para proprietários de imóveis com um preço listado passando collection.filtered() à consulta: home.@keys = "price".

  • Executa uma consulta para a casa de verão na colina executando collection.filtered() usando notação de colchetes para localizar o primeiro proprietário com um endereço definido como "Summerhill St." e obtendo sua casa usando a sintaxe de pontos.

  • Executa uma consulta para todos os proprietários com qualquer campo com valor vermelho passando collection.filtered() à consulta: 'home.@values = "red"'. Obtemos então a casa do primeiro proprietário.

  • Exibe os resultados de nossas consultas na IU renderizando informações sobre as casas

1const HomeList = () => {
2  // query for all HomeOwner objects
3  const homeOwners = useQuery(HomeOwner);
4
5  // run the `.filtered()` method on all the returned homeOwners to
6  // find all homeOwners that have a house with a listed price
7  const listedPriceHomes = useQuer(HomeOwner, homeOwners => {
8    return homeOwners.filtered('home.@keys = "price"');
9  });
10
11  // run the `.filtered()` method on all the returned homeOwners to
12  // find the house with the address "Summerhill St."
13  const summerHillHouse = useQuery(HomeOwner, homeOwners => {
14    return homeOwners.filtered('home["address"] = "Summerhill St."');
15  })[0].home;
16
17  // run the `.filtered()` method on all the returned homeOwners to
18  // find the first house that has any field with a value of 'red'
19  const redHouse = useQuery(HomeOwner, homeOwners => {
20    return homeOwners.filtered('home.@values = "red"');
21  })[0].home;
22
23  return (
24    <View>
25      <Text>All homes:</Text>
26      {homeOwners.map(homeOwner => (
27        <View>
28          <Text>{homeOwner.home.address}</Text>
29        </View>
30      ))}
31
32      <Text>All homes with a price:</Text>
33      {listedPriceHomes.map(homeOwner => (
34        <View>
35          <Text>{homeOwner.home.address}</Text>
36          <Text>{homeOwner.home.price}</Text>
37        </View>
38      ))}
39
40      <Text>Summer Hill House:</Text>
41      <Text>{summerHillHouse.address}</Text>
42      <Text>{summerHillHouse.color}</Text>
43
44      <Text>Red House:</Text>
45      <Text>{redHouse.address}</Text>
46    </View>
47  );
48};
1const HomeList = () => {
2  // query for all HomeOwner objects
3  const homeOwners = useQuery(HomeOwner);
4
5  // run the `.filtered()` method on all the returned homeOwners to
6  // find all homeOwners that have a house with a listed price
7  const listedPriceHomes = useQuery(HomeOwner, homeOwners => {
8    return homeOwners.filtered('home.@keys = "price"');
9  });
10
11  // run the `.filtered()` method on all the returned homeOwners to
12  // find the house with the address "Summerhill St."
13  const summerHillHouse = useQuery(HomeOwner, homeOwners => {
14    return homeOwners.filtered('home["address"] = "Summerhill St."');
15  })[0].home;
16
17  // run the `.filtered()` method on all the returned homeOwners to
18  // find the first house that has any field with a value of 'red'
19  const redHouse = useQuery(HomeOwner, homeOwners => {
20    return homeOwners.filtered('home.@values = "red"');
21  })[0].home;
22
23  return (
24    <View>
25      <Text>All homes:</Text>
26      {homeOwners.map(homeOwner => (
27        <View>
28          <Text>{homeOwner.home.address}</Text>
29        </View>
30      ))}
31
32      <Text>All homes with a price:</Text>
33      {listedPriceHomes.map(homeOwner => (
34        <View>
35          <Text>{homeOwner.home.address}</Text>
36          <Text>{homeOwner.home.price}</Text>
37        </View>
38      ))}
39
40      <Text>Summer Hill House:</Text>
41      <Text>{summerHillHouse.address}</Text>
42      <Text>{summerHillHouse.color}</Text>
43
44      <Text>Red House:</Text>
45      <Text>{redHouse.address}</Text>
46    </View>
47  );
48};

Atualizar um dicionário

Atualiza a propriedade de um dicionário usando o método dictionary.set() ou notação de ponto para definir sua propriedade com um novo valor.

Exemplo

No exemplo UpdateHome a seguir, atualizamos a propriedade de um dicionário.

O componente UpdateHome faz o seguinte:

  • Criar um React
    variável que representa o endereço residencial.
  • Obtenha acesso a uma instância de Realm aberta chamando o hook useRealm()
    dentro do componente.
  • Crie um método de componente updateAddress() que executa uma transação
    de gravação e usa dictionary.set() para definir o endereço da casa com o valor da variável de estado address. Ele também usa sintaxe de ponto para definir yearRenovated como 2004.

  • Renderize um TextInput que exibe e altera a variável de estado address.

  • Adicionar um onPress evento em
    no botão "Atualizar endereço" que chama updateAddress()
1const UpdateHome = ({homeOwnerName}) => {
2  const [address, setAddress] = useState('');
3  const realm = useRealm();
4  const homeOwner = useQuery(
5    HomeOwner,
6    homeOwners => {
7      return homeOwners.filtered(`name == '${homeOwnerName}'`);
8    },
9    [homeOwnerName],
10  )[0];
11
12  const updateAddress = () => {
13    // Update the home object with the new address
14    realm.write(() => {
15      // use the `set()` method to update a field of a dictionary
16      homeOwner.home.set({address});
17      // alternatively, update a field of a dictionary through dot notation
18      homeOwner.home.yearRenovated = 2004;
19    });
20  };
21
22  return (
23    <View>
24      <Text>{homeOwner.name}</Text>
25      <TextInput
26        value={address}
27        onChangeText={setAddress}
28        placeholder='Enter new address'
29      />
30      <Button
31        onPress={updateAddress}
32        title='Update Address'
33       
34      />
35    </View>
36  );
37};
1const UpdateHome = ({homeOwnerName}: {homeOwnerName: string}) => {
2  const [address, setAddress] = useState('');
3  const realm = useRealm();
4  const homeOwner = useQuery(
5    HomeOwner,
6    homeOwners => {
7      return homeOwners.filtered(`name == '${homeOwnerName}'`);
8    },
9    [homeOwnerName],
10  )[0];
11
12  const updateAddress = () => {
13    // Update the home object with the new address
14    realm.write(() => {
15      // use the `set()` method to update a field of a dictionary
16      homeOwner.home.set({address});
17      // alternatively, update a field of a dictionary through dot notation
18      homeOwner.home.yearRenovated = 2004;
19    });
20  };
21
22  return (
23    <View>
24      <Text>{homeOwner.name}</Text>
25      <TextInput
26        value={address}
27        onChangeText={setAddress}
28        placeholder='Enter new address'
29      />
30      <Button
31        onPress={updateAddress}
32        title='Update Address'
33      />
34    </View>
35  );
36};

Excluir membros de um dicionário

Para excluir membros de um dicionário, use o método dictionary.remove() com uma array de propriedades para remover do dicionário.

Exemplo

No exemplo HomeInfo a seguir, excluímos membros de um dicionário.

O componente HomeInfo faz o seguinte:

  • Conseguir acesso a uma instância de Realm aberta chamando o hook useRealm() dentro do componente.

  • Recupere o primeiro proprietário que corresponda ao nome passado ao componente como uma propriedade. Fazemos isso obtendo o primeiro valor retornado da consulta: useQuery(HomeOwner).filtered(`name == '${homeOwnerName}'`).

  • Crie um método de componente deleteExtraHomeInfo() que execute uma transação de gravação e chame dictionary.remove() para remover as propriedades yearRenovated e color.

  • Renderize o nome e o endereço residencial do proprietário na IU.

  • Adicionar um onPress evento no botão "Excluir informações adicionais da página inicial" que chama deleteExtraHomeInfo().

1const HomeInfo = ({homeOwnerName}) => {
2  const realm = useRealm();
3  const homeOwner = useQuery(
4    HomeOwner,
5    homeOwners => {
6      return homeOwners.filtered(`name == '${homeOwnerName}'`);
7    },
8    [homeOwnerName],
9  )[0];
10
11  const deleteExtraHomeInfo = () => {
12    realm.write(() => {
13      // remove the 'yearRenovated' and 'color' field of the house
14      homeOwner.home.remove(['yearRenovated', 'color']);
15    });
16  };
17
18  return (
19    <View>
20      <Text>{homeOwner.name}</Text>
21      <Text>{homeOwner.home.address}</Text>
22      <Button
23        onPress={deleteExtraHomeInfo}
24        title='Delete extra home info'
25       
26      />
27    </View>
28  );
29};
1const HomeInfo = ({homeOwnerName}: {homeOwnerName: string}) => {
2  const realm = useRealm();
3  const homeOwner = useQuery(
4    HomeOwner,
5    homeOwners => {
6      return homeOwners.filtered(`name == '${homeOwnerName}'`);
7    },
8    [homeOwnerName],
9  )[0];
10
11  const deleteExtraHomeInfo = () => {
12    realm.write(() => {
13      // remove the 'yearRenovated' and 'color' field of the house
14      homeOwner.home.remove(['yearRenovated', 'color']);
15    });
16  };
17
18  return (
19    <View>
20      <Text>{homeOwner.name}</Text>
21      <Text>{homeOwner.home.address}</Text>
22      <Button
23        onPress={deleteExtraHomeInfo}
24        title='Delete extra home info'
25      />
26    </View>
27  );
28};

Voltar

Collections

Próximo

Conjuntos

Nesta página