汇总来自 API/divs 的信息

Question

我可以访问 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>

Answer 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，这是 shorthand）。

或者一个小组件（代码量可能稍微少一点）：

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.temp。

汇总来自 API/divs 的信息

Summing information from API/divs

api

sum

calc

reactjs