反应钩子中的正则表达式

Question

我想根据 API 调用的值设置 className。 该 API 是一个财务 API，它以"perchange"的形式返回百分比变化："(+0.03%("。 我想弄清楚它是积极的、消极的还是中立的。 我想影响 css 在正红色表示负时显示绿色，从中性显示灰色。

import React, { useState, useEffect } from "react";
function Ticker(props) {
const [state, setState] = useState({});
const [status, setStatus] = useState();
useEffect(() => {
let currStock = props.stock;
const options = { method: "GET", headers: { Accept: "application/json" } };
fetch(
"https://financialmodelingprep.com/api/v3/company/profile/" + currStock,
options
)
.then(response => response.json())
.then(y => {
setState(y.profile);
});
}, []);
function positive(value) {
//   The Goal being to set className to these so the css can be conditional.
if (/+/g.test(value) == true) {
setStatus("positive");
} else if (/-/g.test(value) == false) {
setStatus("negative");
} else {
setStatus("neutral");
}
}
console.log(state);
positive(state.changesPercentage);
return (
<div className="stock">
<section className="stockInfo">
<h1>{state.companyName}</h1>
<h3> {state.industry}</h3>
<img src={state.image} />
<h3>Financials</h3>
<p className="positive">{state.changes}</p>
<p className={status}>{state.changesPercentage}</p>
<p>${state.price}</p>
<a href={state.website}>Learn More</a>
</section>
</div>
);
}
export default Ticker;

Answer 1

你在渲染函数(组件函数体(中调用setStatus。将"积极"逻辑移动到效果(或其他效果(中将解决您的问题。

如果值在更新过程中没有改变，React 不会重新渲染子组件或火焰效果，但它会重新渲染手头的组件;这反过来又会再次调用setStatus。

这是一个工作版本：https://jsfiddle.net/jqLugkv8/