仅当状态发生更改时才尝试运行函数

Question

只有当小时的状态发生变化时，我才想运行set totals函数。它在每次装载组件时都会运行，而不是仅在值发生更改时才运行。this.state是一个非常大的上下文文件的一部分，所以我只粘贴了正在使用的函数

context.js (Class Component)
set Total
if (this.state.hours > 0) {
this.setState((prevState) => {
if (prevState.hours !== this.state.hours) {
console.log(prevState.hours);
}
return {
total: this.state.total + this.state.hours * ratePerHour * Math.PI,
};
});
console.log(this.state.total, '+', this.state.hours, '*', ratePerHour);
}
This is my component tha
import React, { useState, useEffect, useContext,useRef } from 'react';
import { ProductContext } from '../pages/oniContext';
import { Container,Badge } from 'reactstrap';
import {
Subtitle,
Description,
Titlespan2,
} from '../components/common/title/index';
import { total } from '../components/total';
export const FinalQuote = () => {
const pCR = useContext(ProductContext);
const prevCountRef = useRef();


useEffect(() => {
alert('Run')
console.log(pCR.hours, 'Final Quote Run', pCR.total);
pCR.setTotal();
console.error(pCR.hours);
}, [pCR.hours]);

return (
<section className="testimonial-wrapper gradient-color" id="testimonial">
<Container>
<div className="main-title-wrapper">
<Subtitle Class="site-subtitle gradient-color" Name="Your Quote" />
<Titlespan2
Class="sitemain-subtitle"
Name={`$${Math.round(pCR.total)}`}
/>
<Description
Class="site-dec"
Name="The Shown Price is only an estimate and may increase or decrease based on demand and extent of work"
/>
{pCR.activeAddOns.map((service, index) => (
<Badge color="info" pill>
{service.title}
</Badge>
))}
</div>
</Container>
</section>
);
};

Answer 1

您可以通过在组件类中使用componentDidUpdate生命周期函数来实现这一点。根据文件

componentDidUpdate()在更新发生后立即调用。初始渲染不调用此方法。

意味着，只要组件的状态发生变化，就会调用componentDidUpdate代码块。因此，我们可以在块中放置一个if条件，将新状态与以前的状态进行比较，可以计算总数并重新提交到该状态。代码

class MyComponent extends React.Component {

constructor() {
super();
this.state = {
hours: 0,
total: 0,
ratePerHour: 10
};
}
componentDidUpdate(prevProps, prevState) {
if (prevState.hours !== this.state.hours) {
// Calculate total
this.setState({
total: this.state.total + this.state.hours * this.state.ratePerHour * Math.PI
}
}
}
render() {
return <AnotherComponent />;
}
}

此外，需要注意的是(参考文献：docs)

您可以在componentDidUpdate()中立即调用setState()，但请注意，它必须像上面的例子一样被包装在一个条件中，否则将导致一个无限循环。

如果有任何其他疑问，请随时在评论中联系。

Answer 2

我已经有一分钟没有使用更新的React功能了，但我什么时候可以在我的功能组件中使用useEffect。第二个参数是要监视更改的变量。如果不提供第二个参数，它将类似于componentDidMount和componentDidUpdate运行。一个可能使用的例子：

import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
const [test, setTest] = useState('');
// Specify to watch count because we have more than one state variable
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

以下是他们的一些文档：https://reactjs.org/docs/hooks-effect.html

Answer 3

在我的情况下，即使我向useEffect添加了第二个参数，它也是一个依赖数组。它在每次组件装载时都会运行，而不是只有在值发生变化时才运行，我想这是因为我像一样初始化了我的状态变量

const[myStateVariable, setMyStateVariable] = React.useState('');

所以我不得不在我的useEffect函数中设置这个条件

React.useEffect(() => {
if(myStateVariable !==''){
getMyData()
}
}, [myStateVariable]);