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

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

e、 g:

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

e、 g生成时：

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

这是我的密码：

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

以下是验证规则，用于显示关于汽车制造商的信息或提供数据的报告

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&&
//逻辑的其余部分
关于汽车司机的信息和关于波尔多市居民生活质量的信息
}

显示包含数据的报告：

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

{renderPDF&&
//逻辑的其余部分
}

---

我在这里遗漏了什么？

像这样修改后你能试试吗？如果没有，请提供一个沙箱来运行整个代码

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

{renderPDF？
(
//逻辑的其余部分
)
:
(
关于汽车司机的信息
博尔多迪里奥酒店
)
}

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

---

当使用

useState

hooks时，其中的每一个更改都会重新呈现组件（实际上是行为）。为了避免这种情况，我不得不使用

useRef

useRef

保存最后一个值而不重新渲染组件

你能给我们看一下输入字段的代码吗？我很高兴它在任何方面都有帮助

      <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>
  )
  
  
  
}