在屏幕上显示来自 React 的 useState 钩子的值时使用哪种策略，除非在操作下才重新渲染？

Question

我有一个由三个参数生成的报告。一个用户和 2 个范围日期字段。

例如：

填写所有字段后，可以通过 Gerar 按钮生成报告。

例如生成时：

我不知道如何处理的问题现在发生了。当任何字段的值更改时，报表将再次呈现。还有 Motorista 和 Período 字段的值 header 报告，因为这些值来自参数。

这是我的代码：

useState 参数钩子：

const [selectedDriver, setSelectedDriver] = useState({});
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());

useState表示何时显示报告：

const [renderPDF, setRenderPDF] = useState(false);

Gerar button:

          <Button
            type="submit"
            color="success"
            onClick={() => {
              setRenderPDF(false);
              handleEventsFromMatrix() //function that call an endpoint that brings data to the report
            }}
          >
            Gerar
          </Button>

handleEventsFromMatrix()，调用将数据带到报表的端点的函数：

async function handleEventsFromMatrix() {
    try {
      //rest of logic

      const response =
        await api.get(`endpoint`);

      if (response.data.generatedEvents.length > 0) {
        setRenderPDF(true);
      }
    } catch (err) {
      console.log(err);
    }
  }

这是显示 Informe o motorista e o período para o qual você deseja gerar relatório de diários de bordo 消息或带数据报告的验证规则。 renderPDF hook 开始为 false 以带来消息，当请求成功完成时，将其变为 true，带来带有数据的报告。

留言：

{!renderPDF &&
  //rest of logic

  <div>
    <h1>Informe o motorista e o período para o qual você deseja gerar relatório de diários de bordo</h1>
  </div>
}

显示包含数据的报告：

{renderPDF &&
  <PDFViewer style={styles.page}>
  
  //rest of logic
}

我在这里错过了什么？

Answer 1

改成这样可以试试吗？如果没有，请提供一个沙箱以运行整个代码。

      <Button
            type="submit"
            color="success"
            onClick={() => {
              //setRenderPDF(false); remove
              handleEventsFromMatrix() //function that call an endpoint that brings data to the report
            }}
          >
            Gerar
     </Button>

async function handleEventsFromMatrix() {
    try {
      //rest of logic

      const response =
        await api.get(`endpoint`);

        setRenderPDF(response.data.generatedEvents.length > 0);
      
    } catch (err) {
      console.log(err);
    }
  }

{renderPDF ?
  (
  <PDFViewer style={styles.page}>
    //rest of logic
  )
  :
  (
    <div>
    <h1>Informe o motorista e o período para o qual você deseja gerar 
         relatório de diários de bordo</h1>
     </div>
  )
  
  
  
}

Answer 2

在@Changhoon Lee 和@Aidan Hakimian 的帮助下，我能够调试我的代码以处理缺失的内容。

由于使用了 useState 钩子，其中的每个更改都会重新呈现组件（实际行为）。为了避免这种情况，我不得不使用 useRef。 useRef 保存最后一个值而不重新渲染组件！

在屏幕上显示来自 React 的 useState 钩子的值时使用哪种策略，除非在操作下才重新渲染？

Which strategy to use when displaying a value on the screen that comes from a useState hook of React and not re render unless under an action?

reactjs

react-lifecycle

react-hooks

react-lifecycle-hooks

use-state