如何在ReactJS中从这个数据中获取状态和计数的对象数组

Question

我有一个数据文件，格式为对象数组[{name,state},{name,state},{name,state},{name,state},{name,state}]，我需要获取州的数据以及属于同一州的人数，因此我需要一个包含状态和其计数的对象数组，如[{state,count},{state, count},{state,count}]。ReactJS应该如何实现这个功能？

- Riya Yadav

---

你可以分享一下你迄今为止做了什么吗？代码片段？请遵循stackoverflow问题指南如何提问？-https://stackoverflow.com/help/how-to-ask - Lakshman Kambam

Answer 1

这与ReactJS无关，ReactJS是用于呈现和管理UI的库。 在JavaScript中，您可以使用.reduce函数来完成此操作。我将生成一个包含[{name: string, count: number}]的数组：

const userArray = [{name: Riya, state: US}, {name: Chris, state: DE}]

const stateArray = userArray.reduce((newArray, currentElement) => {
  const stateExistsIndex = newArray.findIndex((state) => state.name === currentElement.state)
  if (stateExistsIndex !== -1) {
    const selectedState = newArray[stateExists] 
    newArray[stateExists] = { name: selectedState.name, count: selectedState.count++ }   
  } else {
    newArray.push({ name: currentElement.name, count: 1 })
  }

  return newArray
}, [])

这将创建一个新的数组。它遍历旧数组，如果状态不存在则将元素推送到新数组中。如果存在，则将其计数增加1。当然，您也可以使用for-of循环完成此操作，这可能更容易理解。

- Chrissi Grilus

---

我在使用上述代码时遇到了这个错误："TypeError：newArray.findIndex不是一个函数"。 - Riya Yadav

抱歉，应该使用“indexOf”而不是“findIndex”，并且您必须检查它是否不等于-1，因为当元素不在数组中时，“indexOf”会返回-1。 - Chrissi Grilus

错误仍在发生（TypeError）：newArray.indexOf不是一个函数。 - Riya Yadav

正好相反，第一个参数是累加器，第二个参数是当前值。请查看API以获取更多信息： https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce或者只需使用for-of循环：let newArray = [] oldArray.forEach((element) => { if (newArray.findIndex(newElement => newElement.name === element.state) === -1) { // 将元素推入数组 } else { 增加新数组元素的计数 } }) - Chrissi Grilus

它将返回整个数组，计数始终为1。 - Riya Yadav