Obtenga el valor devuelto por useState cuando el estado se actualice por primera vez .
En el siguiente código: el valor inicial es 0 y después de hacer clic en el botón, el valor será 1. Quiero almacenar value1 en firstValue y value2 en secondValue y estos valores deben ser inmutables .
function App() { const [count, setCount] = React.useState(0); // const firstValue = // const secondValue = return <button onClick={() => setCount(count+1)}> value {count}</button>; } ReactDOM.render(<App count={0}/>, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script> <div id='root'></div>El valor se almacenará solo con el primer y segundo clic del botón y estos valores deben ser inmutables.
Rendimiento esperado
firstValue = value1 secondValue = value2¿Quizás otra variable de estado puede ser responsable de esta parte?
const MAX = 2 function App() { const [count, setCount] = React.useState(0); const [values, setValues] = React.useState([]); function onClick () { if (count < MAX) { setValues([...values, count]) } setCount(count+1) } const [firstValue, secondValue] = values return ( <div> <button onClick={onClick}> value {count}</button> <p>first value: {firstValue}</p> <p>second value: {secondValue}</p> </div> ) } ReactDOM.render(<App count={0}/>, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script> <div id='root'></div>Suponiendo que value1 es el estado anterior de count y value2 es el estado actual de count .
function App() { const [count, setCount] = React.useState(0); //Initialize the variables let firstValue = count; let secondValue = count; return ( <button onClick={() => { firstValue = secondValue; // set first value equal to previous count value secondValue = count + 1; // set second value equal to new count value setCount(count + 1); // update the state }} > value {count} </button> ); }useRef function App() { const [count, setCount] = React.useState(0); const values = React.useRef({}); const updateValue = () => { setCount(count+1); // get previous values using spread, and then add the dynamic using square brackets values.current = {...values.current, ["value" + (count+1)]: count+1 } } // you may require this values.current console.log(values.current) return <button onClick={() => updateValue() }> value {count}</button>; } ReactDOM.render(<App count={0}/>, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script> <div id='root'></div>