如何防止在React中使用鈎子重新渲染頁面？

Question

我試圖為這個特定的問題找到解決方案，但我可以找到它……與此新的是，我有以下代碼：

    import React, { Fragment, useState } from 'react'
import '../../media/style/modal.css'


export default function Modal(props) {
  const { activateModal } = props
const[values, setValues]= useState({name:'',email:''})

  if (activateModal) {
    document.getElementById('modals').click()
  }

  function handleValues(){
    setValues({
      name:document.getElementById('name').value,
      email:document.getElementById('email').value
    })
  }

  return (
    <Fragment>

      <button type="button" id="modals" style={{ display: 'none' }} data-toggle="modal" data-target="#exampleModalCenter">
        Launch demo modal
</button>


      <div className="modal fade" id="exampleModalCenter" tabIndex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <form onSubmit={handleSubmit}>
            <div className="container">
              <div className="row">
                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div className="row justify-content-center">
                <h5 className="modal-title" id="modalTitle"><span style={{color:'rgb(197,115,199)'}}>get- </span>started</h5>
              </div>
              <div className="row justify-content-center">
                <input type="text" id="name" name="name"  onChange={handleValues} />
                <input type="email"  id="email" name="email" />
              </div>
              <div className="row justify-content-center">

                <button type="submit" id="btn2">Send</button>

              </div>
            </div>

            </form>





          </div>
        </div>
      </div>

    </Fragment>
  )

}

當我在輸入中寫一些東西時，我的頁面重新呈現...而我不知道如何停止這種行為，有什么想法嗎？...我嘗試使用useRef，但是我不知道即時消息是否正確使用了，所以我沒有得到預期的效果

Answer 1

我將您的代碼復制到沙箱中，並為您修復了它https://codesandbox.io/s/agitated-snow-lls4g?fontsize=14

只是為了澄清起見，即使您對其進行了突變，useRef也不會重新呈現。 僅當其他條件觸發重新渲染時，才會顯示更新的值。 所以useState是正確的用法。

盡管我沒有為您更改此名稱（以表明沒有它是可能的），但我還是強烈建議您將電子郵件和姓名放在自己的useState中，以便更改其中一個不會更改另一個。 我也不會從document.getElementById獲取值，而是使用從handleChange傳入的event.target.value，並為每個元素提供一個handleChange。 如果您有多個元素，請使用函數式編程來創建其功能。 （例如handleEmailChange = handleChange('email') ，然后handleChange是一個返回函數的函數（也稱為currying）。

澄清：

• useRef用於在渲染之間保留數據（更新不會觸發重新渲染）

• useState用於保持渲染之間的數據（更新將觸發重新渲染）

• 每個輸入可能應使用其自己的狀態，以避免更改其他組件和效果可能訂閱的值。

• 使用currying來計算handleChange為每個輸入