在React中从JSON获取平均值
在React中从JSON获取平均值
提问于 2021-03-20 01:05:59
我有一个react应用程序，我试图显示我从data.json文件中获得的每个员工的平均工资。我可以输出所有的工资，但不确定如何在屏幕上获得所有工资的平均值。我是一个非常新的反应，所以任何帮助都会非常感谢。
import React,{useState,useEffect} from 'react';
import './App.css';
function App() {
const [data,setData]=useState([]);
const getData=()=>{
fetch('data.json'
,{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then(function(response){
// console.log(response)
return response.json();
})
.then(function(myJson) {
setData(myJson)
});
}
useEffect(()=>{
getData()
},[])
const avg = () => {
return console.log(data);
}
return (
<div className="App">
{data && data.length>0 && data.map((item)=><p>{item.Salary}</p>)}
</div>
);
}
export default App;回答 3
Stack Overflow用户
回答已采纳
发布于 2021-03-20 01:10:54
为此，您可以使用useMemo钩子。它可能看起来像这样：
const avg = useMemo(() => {
if (data.length === 0) {
return 0;
}
return data.reduce((sum, item) => sum + item.Salary, 0) / data.length;
}, [data])memo钩子接收依赖项数组。在本例中，它是[data]。每当依赖项数组中的值发生更改时，都会重新计算useMemo挂钩，并且可以通过常量访问该值。
Stack Overflow用户
发布于 2021-03-20 01:33:56
您不希望在每次需要在组件中使用一点JSON时都复制所有这些代码。您可以从编写一个通用的useAsync custom hook开始-
// hooks.js
import { useState, useEffect } from React
const useAsync = (runAsync, deps = []) => {
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [result, setResult] = useState(null)
useEffect(_ => {
Promise.resolve(runAsync(...deps))
.then(setResult, setError)
.finally(_ => setLoading(false))
}, deps)
return { loading, error, result }
}
export { useAsync }你很兴奋，所以你马上就开始用它-
// MyComponent.js
import { useAsync } from "./hooks.js"
const MyComponent = () => {
const { loading, error, result:items } =
useAsync(_ => {
axios.get("path/to/json")
.then(res => res.json())
}, ...)
// ...
}
export default MyComponent但就到此为止吧。在你需要的时候编写更多有用的钩子-
// hooks.js (continued)
const useAysnc = //...
const fetchJson = (url) =>
fetch(url, {
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(r => r.json())
const useJson = (url) =>
useAsync(fetchJson, [url])
export { useAsync, useJson }现在，在任何组件中获取JSON都非常简单。可重用的泛型函数减少了在您自己的代码中引入bug的机会。你会得到所有可能的状态：loading、error或result -
// MyComponent.js
import { useJson } from "./hooks.js"
const MyComponent = () => {
const { loading, error, result:items } =
useJson("path/to/json")
if (loading)
return <p>Loading...</p>
if (error)
return <p>Error: {error.message}</p>
return <div><Items items={items} /></div> // example use of `items`
}
export default MyComponent计算average需要使用另一个泛型函数sum -
// stats.js
const average = a =>
sum(a) / a.length
const sum = a =>
a.reduce((s, v) => s + v, 0)
export { average, sum }注意到一种模式？隔离行为并编写可重用的函数。在需要的地方导入它们。下面是我们如何在你的组件中使用average -
// MyComponent.js
import { average } from "./stats.js"
import { useJson } from "./hooks.js"
const MyComponent = () => {
// useJson...
<div>Average: {average(items.map(v => v.Salary))}</div>
}
export default MyComponentStack Overflow用户
发布于 2021-03-20 01:23:03
你需要找到所有薪水的总和，然后求出它的平均值。
let salaries=[2,3,8,1];
let sum=0;
for(let i=0;i<salaries.length;i++){
sum=sum+salaries[i];
}
average=sum/salaries.length;
console.log(average);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66712605
复制相关文章
相似问题
腾讯云开发者
