3

Tenho o seguinte conjunto de dados:

const dados = [5, 10, 15, 20, 25, 50, 90];
const colors = [
  "#52DF9A",
  "#FFCE1C",
  "#3570BD",
  "#3570BD",
  "#00B894",
  "#FB6B32",
];

E tenho o seguinte estado:

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

Preciso percorrer os dados e colocar um dado com uma respectiva cor, para que o estado "dado" fique da seguinte maneira:

data = [
  { valor: 5, color: "#52DF9A" },
  { valor: 10, color: "#FFCE1C" }, 
  // ...
];

Fiz da seguinte maneira com useEffect:

useEffect(() => {
  dados.forEach((dado, i) => {
    setData((prev) => {
      return [...prev, { valor: dado, color: colors[i] }];
    });
  });
}, []);

Mas o problema é que, quando eu faço dessa forma, a primeira posição fica ocupada por um objeto vazio ({}), e eu preciso que os dados comecem na primeira posição. Como eu posso resolver isso?

Porque se eu fizer assim:

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

Dá erro.

3
  • 1
    Em tese não era para const [data, setData] = useState([]) dar erro. Poderia dizer em mais detalhes o que acontece? Commented 5/11/2020 às 11:20
  • Quando eu coloco apenas [ ] ele fala isso: Argument of type '(prev: never[]) => { valor: number; color: string; }[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
    – Rindi
    Commented 5/11/2020 às 17:43
  • 1
    Se você quiser entender porque isso ocorre, pode abrir uma outra pergunta. Só não se esqueça de criar um Exemplo Mínimo, Completo e Verificável. Commented 5/11/2020 às 17:44

1 Resposta 1

7

O problema é que você inicializa data como um array que já está com o primeiro elemento preenchido. No caso, por um objeto literal "vazio":

const [data, setData] = useState([{}]);
//                                ↑↑
//                Objeto "vazio" no primeiro elemento

Desse modo, quando a lógica que você colocou no useEffect for executada, o primeiro elemento será mantido no array, já que você sempre mantém o estado anterior no array:

useEffect(() => {
  dados.forEach((dado, i) => {
    setData((prev) => {
      return [...prev, { valor: dado, color: colors[i] }];
    });
  });
}, []);

Note que o ...prev está fazendo exatamente isso — mantendo o estado anterior.


Uma solução é inicializar o estado data como um array vazio:

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

Se, por algum motivo, isso não for possível (o que deveria ser), você pode modificar a lógica do useEffect:

useEffect(() => {
  const newData = dados.map((valor, i) => ({
    valor,
    color: colors[i]
  }));

  setData(newData);
}, []);

Um exemplo do array que newData será:

const dados = [5, 10, 15, 20, 25, 50, 90];
const colors = [
  "#52DF9A",
  "#FFCE1C",
  "#3570BD",
  "#3570BD",
  "#00B894",
  "#FB6B32",
];

const newData = dados.map((valor, i) => ({
  valor,
  color: colors[i]
}));

console.log(newData);

0

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 .