无法向嵌套数组添加值

Question

我在初始状态下有以下数组值：

const [chartData, setChartData] = useState([["Type", "Counts"]]);

并从服务器检索以下值：

response.data:Object

Bird: 4
Cat: 8
Dog: 5

我需要这个数组：

const piedata = [
  ["Type", "Counts"],
  ["Bird", 4],
  ["Cat", 8],
  ["Dog", 5]
];

我正在尝试类似的方法，但在每种情况下，我都会将这 3 个元素添加为外部列表的第二个元素，例如:

[["Type", "Counts"], [["Bird", 4], ["Cat", 8], ["Dog", 5]]];

getData("/pets", body)
      .then((response) => {
       let array = Object.entries(response.data).map(([k, v]) => "[" + k + "," + v +"],")
       chartData.push(array)
      })

那么，实现这一目标的正确方法是什么？我应该同时使用

setChartData

钩子和

push

元素到外部数组吗？

也试过这个，但没用：

Object.entries(response.data).map(([k, v]) => chartData.push([ k + "," + v ] + ","))

Answer 1

这里有很多错误：

1. 你不能推到那样的状态，你必须使用

   setChartData

2. "[" + k + "," + v +"],"

   这是一个字符串而不是数组

你应该做什么：

setChartData([...initialArray, ...Object.entries(piedata)])

Vanilla js 证明它有效：

let initialArray = [
  ["Type", "Counts"]
]
const piedata = {
  Bird: 4,
  Cat: 8,
  Dog: 5
}

initialArray = [...initialArray, ...Object.entries(piedata)]
console.log(initialArray)