json - ReactJS:在渲染期间计算 JSON 对象中的字符串数组的平均值

Question

我的第一个 ReactJS 应用

我之前没有使用 reactjs 和 json 的经验，但我正在努力提高我的技能，并且被告知 reactjs 非常适合前端。

我正在尝试读取API调用，获取json对象，解析它并显示某些信息。在几个在线教程的帮助下，我能够相对轻松地实现几乎所有这些，但我遇到了困难。

问题:
我已经解析并显示了大部分 json 对象，但每个对象中都有一个 array 字符串。我想从 json 对象中获取该 array 的平均值，并将其显示在 html 中。以下是我的尝试:

//importing necessary modules
import React from 'react';
import ReactDOM from 'react-dom';

//class creates the React component I am building
class ContentFeed extends React.Component {
   constructor() {
     super();

     this.state = {
       'workers': []
     }
   }

   componentDidMount() {
     this.getItems();
   }

   getItems() {
     fetch('localhost:7575')
       .then(results => results.json())
       //.then(results => console.log(results));
       .then(results => this.setState({'workers': results.workers}));
   }

   render() {
     return (            
       <ul>
         // I'm quite new to reactjs 
         // so I'm not too sure if what I'm doing below is legal syntax
         {this.state.workers.map(function(item, index) {
             var arrNum = 0;    
             var h = item.hours.split(",");
             var sum = 0;
             for(var i = 0; i < h.length; i++) {
                sum += parseInt(h[i]);
             }
             arrNum = (sum/h.length);    
             return (
                <div key={index}>
                  <h1>{item.firstName} {item.lastName}</h1>
                  <h4>{item.hireDate}</h4>
                  <h4>{item.dept}</h4>
                  <h4>arrNum</h4>
                </div>
              )
          })}
       </ul>
     );
   }
}

ReactDOM.render(
    <ContentFeed/>,
    document.getElementById('root')
);

应该出现的是一个 html 页面，其中包含员工姓名的标题，后跟包含相关员工信息的较小标题，最后是他们的平均工作时间。

但是网页是空白的。

我检查了页面上开发人员工具中的console选项卡，发现了如下错误:

Uncaught TypeError: item.hours.split is not a function
    at index.js:29
    at Array.map (<anonymous>)
    at ContentFeed.render (index.js:26)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)

我不确定如何解决这个问题。我真诚地希望我已经提供了所需的尽可能多的相关信息。感谢您的帮助。

更新1

这是来自控制台选项卡

Uncaught TypeError: item.hours.split is not a function
    at index.js:29
    at Array.map (<anonymous>)
    at ContentFeed.render (index.js:26)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)

更新2

这是来自 fetch 的一些原始 JSON

{
"workers": [
{
"firstName": "Tom",
"lastName": "Ronson",
"dept": "Sales",
"hireDate": "09/09/2015",
"hours": [
"8",
"10",
"4",
"6",
"6"
]
},
{
"firstName": "Bob",
"lastName": "Howser",
"dept": "Acct",
"hireDate": "01/05/2005",
"hours": [
"8",
"10",
"4",
"6",
"6"
]
},
{
"firstName": "Jane",
"lastName": "Winger",
"dept": "Legal",
"hireDate": "08/01/2008",
"hours": [
"5",
"6",
"5",
"5",
"6"
]
},

Answer 1

您的回复数据为 hours属性是一个字符串数组，而不是逗号分隔的小时列表。

workers: [
  {
    firstName: "Tom",
    lastName: "Ronson",
    dept: "Sales",
    hireDate: "09/09/2015",
    hours: ["8", "10", "4", "6", "6"]
  },
  {
    firstName: "Bob",
    lastName: "Howser",
    dept: "Acct",
    hireDate: "01/05/2005",
    hours: ["8", "10", "4", "6", "6"]
  },
  {
    firstName: "Jane",
    lastName: "Winger",
    dept: "Legal",
    hireDate: "08/01/2008",
    hours: ["5", "6", "5", "5", "6"]
  }
]

可以使用 array::reduce 来计算平均工作时间，以计算小时数除以数组长度的总和

const avg =
    item.hours.reduce((sum, curr) => sum + Number(curr), 0) /
    item.hours.length;

您可以这样映射数据(不要忘记使用正确的 JSX 语法，即 <h4>{avg}</h4> 与 <h4>avg</h4> )

{this.state.workers.map((item, index) => {
  const avg =
    item.hours.reduce((sum, curr) => sum + Number(curr), 0) /
    item.hours.length;

  return (
    <li key={index}>
      <h1>
        {item.firstName} {item.lastName}
      </h1>
      <h4>{item.hireDate}</h4>
      <h4>{item.dept}</h4>
      <h4>{avg}</h4> // <-- * use correct JSX syntax
    </li>
  );
})}