React实现组件仅在点击Apply按钮时触发重新渲染的技术咨询

Hey there! Let's sort out this issue where your Summary component re-renders every time a user types in an input field. The core fix here is to separate temporary input state (for real-time user input) from confirmed state (the values you actually want to pass to Summary only after the user clicks "Apply").

Here's the Step-by-Step Solution: #

1. Add a confirmed state in your App component: This state will hold the finalized values that get sent to Summary.
2. Keep your existing temporary input states: These track what the user is typing in real-time, but won't directly feed into Summary.
3. Update the confirmed state on button click: When the user hits "Apply", copy the temporary input values into the confirmed state.
4. Pass confirmed values to Summary: Instead of passing the real-time inputs, use the confirmed state as props for Summary.

Modified App.js Code: #

import React from "react";
import Summary from "./Components/Summary";
function App() {
  // Track real-time user input (temporary state)
  const [tempInputs, setTempInputs] = React.useState({
    i1: "",
    i2: "",
    i3: ""
  });

  // Track confirmed values that feed into Summary
  const [confirmedInputs, setConfirmedInputs] = React.useState({
    i1: "",
    i2: "",
    i3: ""
  });

  const handleApply = () => {
    // Update confirmed state with current temporary input values
    setConfirmedInputs(tempInputs);
    
    // This is where you'd call your API with the confirmed values!
    // Example:
    // fetch(`/api/summary?part=${tempInputs.i1}&start=${tempInputs.i2}&end=${tempInputs.i3}`)
    //   .then(res => res.json())
    //   .then(data => {
    //     // If you need to pass fetched data to Summary, you could add another state for it
    //     // setSummaryData(data);
    //   });
  };

  return (
    <>
      {/* Update temporary state on input change */}
      <input 
        type="text" 
        id="input1" 
        value={tempInputs.i1}
        onChange={(e) => setTempInputs(prev => ({...prev, i1: e.target.value}))} 
      />
      <input 
        type="text" 
        id="input2" 
        value={tempInputs.i2}
        onChange={(e) => setTempInputs(prev => ({...prev, i2: e.target.value}))} 
      />
      <input 
        type="text" 
        id="input3" 
        value={tempInputs.i3}
        onChange={(e) => setTempInputs(prev => ({...prev, i3: e.target.value}))} 
      />
      <button type="button" onClick={handleApply}>
        Apply
      </button>
      {/* Pass confirmed values to Summary instead of real-time inputs */}
      <Summary i1={confirmedInputs.i1} i2={confirmedInputs.i2} i3={confirmedInputs.i3} />
    </>
  );
}
export default App;

Why This Works: #

• The tempInputs state updates every time the user types, but since we're not passing this to Summary, the component doesn't re-render.
• Only when the user clicks "Apply" does confirmedInputs update, which changes the props sent to Summary—triggering a re-render exactly when you want it.
• I merged the three separate input states into a single tempInputs object to keep the code cleaner (this is optional, but makes scaling easier if you add more inputs later).

Why Your useRef Attempt Didn't Work: #

useRef stores mutable values, but changing a ref's value doesn't trigger a component re-render. So even if you updated the ref on button click, Summary wouldn't detect any prop changes and wouldn't re-render. Using React state for the confirmed values is the right approach here because state updates trigger re-renders when needed.

内容的提问来源于stack exchange，提问作者Campbell D