1

Estou usando o react-select para fazer um select no projeto React. Eu preciso retornar os últimos 5 anos. E depois popular o options={} do Select. Só que ele tá pegando apenas o ultimo ano, no caso o 2020, mas não tá trazendo a lista inteira, que seria: 2020,2019,2018,2017,2016

  const getOptions = () => {
    const years = [];

    for (let i = 0; i < 5; i++) {
      years.push(new Date().getFullYear() - i);
    }

    for (let valor of years) {
      console.log(valor);
      const anos = [
        {
          value: valor,
          label: valor
        }
      ];

      console.log("years", years);
      console.log("anos", anos);
      return anos;
    }
  };

Select:

 <Select
        placeholder="Ano"
        value={props.values.ano}
        onChange={selectedOption => {
          handleChange("ano")(selectedOption);
        }}
        isSearchable={true}
        options={getOptions()}
        styles={customStyles}
        name="ano"
        isLoading={false}
        loadingMessage={() => "Carregando os ano"}
        noOptionsMessage={() => "Não tem ano"}
      />

Ele carrega apenas: inserir a descrição da imagem aqui

2 Respostas 2

1

Acho que você se confundiu

como seu código atribui um valor, ao inves de incrementar o array, é natural que aconteça isso

repare:

for (let valor of years) {
  const anos = [
    {
     value: valor,
     label: valor
    }
  ];    
  return anos;
 }

o correto seria você incrementar com push resultando num codigo assim:

anos.push({
  value: valor,
  label: valor
 })

defina let anos antes do for, e implemente o push em anos, dentro do for de years.

assim como a const years foi definido antes do for.

const years = [];

for (let i = 0; i < 5; i++) {
  years.push(new Date().getFullYear() - i);
}

o retorno da função getOptions deve ficar fora do for assim terminando as atribuições e depois retornando o array.

 let anos = [];
 for (let valor of years) {
  anos.push({
     value: valor,
     label: valor
    })  
 }
 return anos;

Uma dica use let ao inves de const. A const se refere a constante ou seja não muda, mas let define uma variavel dentro de um escopo que pode ser mudada durante a execussão do mesmo.

1

Você também pode optar por uma solução um pouco mais declarativa, sem a necessidade de usar uma solução imperativa. Não há nada de errado com o for, mas ele foge um pouco dos padrões "imutáveis" que o React prega.

Então, você pode fazer também algo como:

function getOptions(ammount = 5) {
  return Array.from({ length: ammount })
    .map((_, index) => new Date().getFullYear() - index);
}

console.log(getOptions());

Basicamente, estamos criando uma lista com 5 elementos e mapeando cada elemento desse array para um ano em específico. Para isso, fazemos uma subtração do ano atual menos o índice do elemento, então, teremos:

  • Primeira iteração, índice zero: 2020 - 0 -> 2020;
  • Segunda iteração, índice um: 2020 - 1 -> 2019;
  • Terceira iteração, índice dois: 2020 - 2 -> 2018;
  • Quarta iteração, índice três: 2020 - 1 -> 2017;
  • Quinta iteração, índice quatro: 2020 - 4 -> 2016.
1
  • 1
    Gostei da forma que você fez, principalmente a explicação de imperativo e declarativo. 4/01/2020 às 15:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .