Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1328578630868471815
adicionou 2 caracteres ao conteúdo
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

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 mandeiramaneira:

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

Fiz da seguinte maneira com useEffect 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 vazia:ocupada por um objeto vazio ({}), e eu preciso que os dados comecem na primeira posição. Como eu posso resolver isso? Porque

Porque se eu fizer assim:

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

ele da um erro.

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 mandeira:

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 vazia: {}, 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([]);

ele da um erro.

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([]);

erro.

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 mandeira:

data = [{valor: 5, color: "#52DF9A" },
        {valor: 10, color: "#FFCE1C" }, ...
]
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] }];
      });
    });

  }, []);

  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 vazia: {}{}, 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([]); ele da um erro.Porque se eu fizer assim:

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

ele da um erro.

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 mandeira:

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 vazia: {}, 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([]); ele da um erro.

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 mandeira:

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 vazia: {}, 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([]);

ele da um erro.

Fonte Link
Rindi
  • 73
  • 1
  • 1
  • 11

Como colocar objetos em array vazio com React Hooks

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 mandeira:

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 vazia: {}, 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([]); ele da um erro.