汇总来自 API/div 的信息答案

【问题标题】：Summing information from API/divs汇总来自 API/div 的信息
【发布时间】：2020-07-19 22:03:17
【问题描述】：

我可以访问 API 并使用 useState 存储它们。我有一个问题——如何在 React 中轻松地将两个 div 的值相加？我不想使用 jQuery，我希望它干净整洁。有任何想法吗？这里可以看到部分相关代码。也许useRef？

 const [details, setDetails] = useState({})

  const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}forecast?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setDetails(result);
          setQuery('');
          console.log(result);
          return result;
        })
----

<div className="detail--icon">Morning: {Math.round(details.daily[1].temp.morn)}°c</div>
<div className="detail--icon">Day: {Math.round(details.daily[1].temp.day)}°c</div>
<div className="detail--icon">Night: {Math.round(details.daily[1].temp.night)}°c</div>
<div className="detail--icon">Humidity: {details.daily[1].humidity}%</div>

【问题讨论】：

标签： reactjs api sum calc

【解决方案1】：

不确定 div 的总和值是什么意思，但鉴于您在重复 div 中显示的内容有很大不同（Math.round 并非在所有地方都使用，后缀不同，数据不属于单个对象，例如前三个是details.daily[1].temp 的一部分，但最后一个是details.daily[1] 的一部分），我建议两个选项：

接受标签之间内容的辅助函数（content 参数将是 JSX）：

const getDetail = (content) => {
   return (
      <div className="detail--icon">{content}</div>
   )
}

并像这样使用它：

{getDetail(<>Morning: {Math.round(details.daily[1].temp.morn)}°c</>)}

请注意，您需要将<> 和</> 放在中间以使其成为有效的JSX（这是React.Fragment 的简写）。

或一个小组件（可能代码量略少）：

const Detail = (props) => (
   <div className="detail--icon">{props.children}</div>
)

...

<Detail>Morning: {Math.round(details.daily[1].temp.morn)}°c</Detail>

您可以更进一步，将行的所有内容存储在 JSX 元素数组中并在其上执行 Array.map，但我不确定它的可读性如何。

除了标记重构之外，我建议的另一件事是在渲染之前将 details.daily[1] 或 details.daily[1].temp 存储在变量中，并在必要时写入 daily 或 daily.temp。

【讨论】：