Javascript 计算React项目中数组中出现的次数

我从API中获取了一些国家的数组列表。我已经把这些国家列成了一个数组，但每个国家都出现过多次。我编写了一个函数来获取每个国家的出现次数，以及它们在一个单独数组中出现的次数，但我只是得到一条错误消息，“对象作为子对象无效”

下面是代码沙盒的链接

我的代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       data: [],
       countries: [],
       countryoccurence: []
    }
  }
  componentDidMount() {
    this.fetchCountryData()
  }
  fetchCountryData = async () => {
    const url = 'https://api.thecatapi.com/v1/breeds'
    try {
      const response = await axios.get(url)
      const data = await response.data
      this.setState({
        data,
      })

      const [countries, countryoccurence] = this.catbreeds();
      this.setState({
        countries, countryoccurence
      })
    } catch (error) {
      console.log(error)
    }
  }



catbreeds(){
  const countries = (this.state.data.map((bill) => bill.origin));
console.log(countries) 
var countryoccurence = countries.reduce(function(obj, b) {
  obj[b] = ++obj[b] || 1;
  return obj;
}, {});

//   return [country, count];
  return [countries, countryoccurence]
  
}

  render() {
    return (
      <div>
         <ul>
          {this.state.countries}
        </ul>
        {this.state.countries}   {/*  This returns the list of the countries */}
        {this.state.countryoccurence}  {/*  // This is the part I'm having problem with. Actually, I'm expecting the reult of this line to be something like ["Greece", 6 "England", 8...] */}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"))

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“axios”导入axios；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据：[]，
国家：[]，
国家发生：[]
}
}
componentDidMount（）{
this.fetchCountryData（）
}
fetchCountryData=async（）=>{
常量url=https://api.thecatapi.com/v1/breeds'
试一试{
const response=wait axios.get（url）
const data=等待响应.data
这是我的国家({
数据，
})
const[countries，countryaccurrence]=这个.catbrides（）；
这是我的国家({
国家
})
}捕获（错误）{
console.log（错误）
}
}
猫科动物（）{
constcountries=（this.state.data.map（（bill）=>bill.origin））；
console.log（国家/地区）
var countryoccurrence=国家/地区.reduce（函数（obj，b）{
obj[b]=++obj[b]| 1；
返回obj；
}, {});
//返回[国家，计数]；
返回[国家/地区，国家/地区]
}
render（）{
返回(

{this.state.countries}

{this.state.countries}{/*返回国家列表*/}
{this.state.countryOccurrence}{/*//这是我遇到问题的部分。事实上，我希望这一行的结尾类似于[“希腊”，6“英格兰”，8…]*/}
)
}
}
ReactDOM.render（，document.getElementById（“根”））

导致错误的问题正是消息所说的：您试图在JSX中将React对象（React中的数组是数组）呈现为子对象，这是无效的

this.state.countries

和

this.state.country事件

都是对象。您需要迭代数组，并使用

map

或其他方法为每个数组元素返回一个元素。

工作应用程序：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“axios”导入axios；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
国家：[]，
国家发生：[]
};
}
componentDidMount（）{
this.fetchCountryData（）；
}
fetchCountryData=async（）=>{
常量url=”https://api.thecatapi.com/v1/breeds";
试一试{
const response=wait axios.get（url）；
常量数据=等待响应。数据；
//console.log（数据）
这是我的国家({
数据
});
const[countries，countryaccurrence]=这个.catbrides（）；
这是我的国家({
国家，
乡村事件
});
}捕获（错误）{
console.log（错误）；
}
};
猫品种=（）=>{
const countries=this.state.data.map（（bill）=>bill.origin）；
//console.log（国家/地区）
var countryoccurrence={}；
/*在这里，我们反复浏览国家列表，
首先，我们检查这些国家是否已经存在
在countryoccurence对象中，如果它存在，我们将递增
它是count，如果不是，那么我们将给它一个初始值1。
*/
countries.forEach（（国家）=>{
控制台日志（国家）；
如果（国家/地区发生[国家/地区]）{
CountryOccurrence[国家]+=1；
}否则{
CountryOccurrence[国家]=1；
}
});
console.log（“this:，countryoccurrence”）；
//返回[国家，计数]；
返回[国家，国家/地区]；
};
render（）{
返回(
{/*

{this.state.countries}
*/}
所有国家：{this.state.Countries.sort（）}

事件：{JSON.stringify（this.state.countryOccurrence）}

);
}
}
render（，document.getElementById（“根”））；

这些都是我立即注意到的问题，正如Randy的回答所指出的，您的

countryoccurrence

函数本身可能存在问题。谢谢@Ian，但Countrys不是函数我的错误，我将编辑我的答案。