Question

我只想在小时状态更改后才运行设置总计功能。它在每次安装组件时运行，而不是仅在值更改时运行。 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生命周期函数来实现。按照docs

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

仅在状态更改时尝试运行功能

2 个答案: