當在屏幕上顯示來自 React 的 useState 鈎子的值並且除非在操作下才重新渲染時，使用哪種策略？

Question

我有一個由三個參數生成的報告。 一個用戶和 2 個范圍日期字段。

例如：

填寫完所有字段后，可以通過Gerar按鈕生成報告。

例如，當生成時：

我不知道如何處理的問題現在發生了。 當任何字段的值發生更改時，報表會再次呈現。 以及 header 報告的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 ：

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

handleEventsFromMatrix() ， function 調用將數據帶入報告的端點：

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 eo período para o qual você deseja gerar relatório de diários de bordo消息或帶數據報告的驗證規則。 renderPDF鈎子以 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保存最后一個值而不重新渲染組件！