entityMap|blocks|key|fntcl|text|为此，您可以使用useMemo钩子。它可能看起来像这样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|d89f2|const+avg+=+useMemo(()+=>+{
++if+(data.length+===+0)+{
++++return+0;
++}
++
++return+data.reduce((sum,+item)+=>+sum+%2B+item.Salary,+0)+/+data.length;
},+[data])|code-block|syntax|javascript|bb1d1|memo钩子接收依赖项数组。在本例中，它是[data]。每当依赖项数组中的值发生更改时，都会重新计算useMemo挂钩，并且可以通过常量访问该值。|13gte^0|8|7|0|0|L|6|1E|7|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@$A|P|B|Q|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|R|9|@]|E|@]|F|$J|K]]|$2|L|4|M|6|7|8|S|9|@$A|T|B|U|C|D]|$A|V|B|W|C|D]]|E|@]|F|$]]|$2|N|4|-4|6|7|8|X|9|@]|E|@]|F|$]]]]

<p>You can use the <code>useMemo</code> hook for this. It could look sth like this:</p>
<pre><code>const avg = useMemo(() =&gt; {
  if (data.length === 0) {
    return 0;
  }
  
  return data.reduce((sum, item) =&gt; sum + item.Salary, 0) / data.length;
}, [data])
</code></pre>
<p>The memo hook receives a dependency array. In this case, it is <code>[data]</code>. Whenever a value in the dependency array changes, the <code>useMemo</code> hook is recomputed and the value is accessible via the constant.</p>


entityMap|blocks|key|969qb|text|你需要找到所有薪水的总和，然后求出它的平均值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1gul8|​|4ejcp|let+salaries=[2,3,8,1];
let+sum=0;
for(let+i=0;i<salaries.length;i%2B%2B){
++sum=sum%2Bsalaries[i];
}
average=sum/salaries.length;
console.log(average);|code-block|syntax|javascript|992tg|dep3j^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|N|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|K|4|-4|6|7|8|P|9|@]|A|@]|B|$]]]]

<p>You need to find the sum of all salaries and then find the average of it.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let salaries=[2,3,8,1];
let sum=0;
for(let i=0;i&lt;salaries.length;i++){
  sum=sum+salaries[i];
}
average=sum/salaries.length;
console.log(average);</code></pre>
</div>
</div>
</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://reactjs.org/docs/hooks-reference.html|blocks|key|asqrl|text|您不希望在每次需要在组件中使用一点JSON时都复制所有这些代码。您可以从编写一个通用的useAsync+custom+hook开始-|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|f7dop|//+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+}|code-block|syntax|javascript|f33kn|你很兴奋，所以你马上就开始用它-|b5o43|//+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|63s2k|但就到此为止吧。在你需要的时候编写更多有用的钩子-|eittk|//+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+}|7f8pb|现在，在任何组件中获取JSON都非常简单。可重用的泛型函数减少了在您自己的代码中引入bug的机会。你会得到所有可能的状态：loading、error或result+-|48rsf|//+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|8deir|计算average需要使用另一个泛型函数sum+-|5oa8n|//+stats.js

const+average+=+a+=>
++sum(a)+/+a.length

const+sum+=+a+=>
++a.reduce((s,+v)+=>+s+%2B+v,+0)

export+{+average,+sum+}|26job|注意到一种模式？隔离行为并编写可重用的函数。在需要的地方导入它们。下面是我们如何在你的组件中使用average+-|to28|//+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+MyComponent|7qdrc^0|17|8|1G|B|0|0|0|0|0|0|0|1P|7|1X|5|23|6|0|0|2|7|K|3|0|0|1C|7|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|1C|G|@$H|1D|I|1E|J|K]]|L|@$H|1F|I|1G|A|1H]]|6|$]]|$A|M|C|N|2|O|F|1I|G|@]|L|@]|6|$P|Q]]|$A|R|C|S|2|E|F|1J|G|@]|L|@]|6|$]]|$A|T|C|U|2|O|F|1K|G|@]|L|@]|6|$P|Q]]|$A|V|C|W|2|E|F|1L|G|@]|L|@]|6|$]]|$A|X|C|Y|2|O|F|1M|G|@]|L|@]|6|$P|Q]]|$A|Z|C|10|2|E|F|1N|G|@$H|1O|I|1P|J|K]|$H|1Q|I|1R|J|K]|$H|1S|I|1T|J|K]]|L|@]|6|$]]|$A|11|C|12|2|O|F|1U|G|@]|L|@]|6|$P|Q]]|$A|13|C|14|2|E|F|1V|G|@$H|1W|I|1X|J|K]|$H|1Y|I|1Z|J|K]]|L|@]|6|$]]|$A|15|C|16|2|O|F|20|G|@]|L|@]|6|$P|Q]]|$A|17|C|18|2|E|F|21|G|@$H|22|I|23|J|K]]|L|@]|6|$]]|$A|19|C|1A|2|O|F|24|G|@]|L|@]|6|$P|Q]]|$A|1B|C|-4|2|E|F|25|G|@]|L|@]|6|$]]]]

<p>You don't want to duplicate all of that code every time you need a bit of JSON in your components. You can begin by writing a generic <code>useAsync</code> <a href="https://reactjs.org/docs/hooks-reference.html" rel="nofollow noreferrer">custom hook</a> -</p>
<pre class="lang-js prettyprint-override"><code>// hooks.js

import { useState, useEffect } from React

const useAsync = (runAsync, deps = []) =&gt; {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [result, setResult] = useState(null)
  
  useEffect(_ =&gt; {
    Promise.resolve(runAsync(...deps))
      .then(setResult, setError)
      .finally(_ =&gt; setLoading(false))
  }, deps)

  return { loading, error, result }
}

export { useAsync }
</code></pre>
<p>You're excited so you start using it right away -</p>
<pre class="lang-js prettyprint-override"><code>// MyComponent.js

import { useAsync } from &quot;./hooks.js&quot;

const MyComponent = () =&gt; {
  const { loading, error, result:items } =
    useAsync(_ =&gt; {
      axios.get(&quot;path/to/json&quot;)
        .then(res =&gt; res.json())
    }, ...)

  // ...
}

export default MyComponent
</code></pre>
<p>But stop there. Write more useful hooks when you need them -</p>
<pre class="lang-js prettyprint-override"><code>// hooks.js (continued)

const useAysnc = //...

const fetchJson = (url) =&gt;
  fetch(url, {
    headers : { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
  .then(r =&gt; r.json())

const useJson = (url) =&gt;
  useAsync(fetchJson, [url])

export { useAsync, useJson }
</code></pre>
<p>Now it's dead-simple to fetch JSON in any component. Reusable generic functions reduces the chance you introduce bugs to your own code. And you get all the possible states: <code>loading</code>, <code>error</code>, or <code>result</code> -</p>
<pre class="lang-js prettyprint-override"><code>// MyComponent.js

import { useJson } from &quot;./hooks.js&quot;

const MyComponent = () =&gt; {
  const { loading, error, result:items } =
    useJson(&quot;path/to/json&quot;)

  if (loading)
    return &lt;p&gt;Loading...&lt;/p&gt;

  if (error)
    return &lt;p&gt;Error: {error.message}&lt;/p&gt;

  return &lt;div&gt;&lt;Items items={items} /&gt;&lt;/div&gt; // example use of `items`
}

export default MyComponent
</code></pre>
<p>Caclculating <code>average</code> is a matter of using another generic function, <code>sum</code> -</p>
<pre class="lang-js prettyprint-override"><code>// stats.js

const average = a =&gt;
  sum(a) / a.length

const sum = a =&gt;
  a.reduce((s, v) =&gt; s + v, 0)

export { average, sum }
</code></pre>
<p>Noticing a pattern? Isolate behaviour and write reusable functions. Import them where needed. Here's how we use <code>average</code> in your component -</p>
<pre class="lang-js prettyprint-override"><code>// MyComponent.js

import { average } from &quot;./stats.js&quot;
import { useJson } from &quot;./hooks.js&quot;

const MyComponent = () =&gt; {
  // useJson...

  &lt;div&gt;Average: {average(items.map(v =&gt; v.Salary))}&lt;/div&gt;
}

export default MyComponent
</code></pre>


<p>I have a react application for which I'm trying to show the average salary for each employee that I am getting from my data.json file. I am able to output all the salaries but unsure of how to get the average of all the salaries on the screen. I'm pretty new to React so any help would be greatly appreciated.</p>
<pre><code>import React,{useState,useEffect} from 'react';
import './App.css';

function App() {
  const [data,setData]=useState([]);
  const getData=()=&gt;{
    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(()=&gt;{
    getData()
  },[])

  const avg = () =&gt; {
    return console.log(data);
  }

  return (

    &lt;div className=&quot;App&quot;&gt;
     {data &amp;&amp; data.length&gt;0 &amp;&amp; data.map((item)=&gt;&lt;p&gt;{item.Salary}&lt;/p&gt;)}
    &lt;/div&gt;
  );
}

export default App;
</code></pre>


Getting an average from JSON in React

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我有一个react应用程序，我试图显示我从data.json文件中获得的每个员工的平均工资。我可以输出所有的工资，但不确定如何在屏幕上获得所有工资的平均值。我是一个非常新的反应，所以任何帮助都会非常感谢。 import React,{useState,useEffect} from 'react';import '....

问在React中从JSON获取平均值
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中从JSON获取平均值EN