獲取useState回傳的值

獲取第一次狀態更新時useState回傳的值。

在以下代碼中： 初始值為0，單擊按鈕后值為1。我想將value1存盤在firstValue中，將value2存盤在secondValue中，這些值必須是不可變的。

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>

值將僅存盤第一次和第二次單擊按鈕，并且這些值必須是不可變的。

預期產出

firstValue = value1
secondValue = value2

uj5u.com熱心網友回復：

假設value1是count的先前狀態，value2是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>
  );
}

uj5u.com熱心網友回復：

• 不確定這是最佳解決方案，而是一種使用方法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>

uj5u.com熱心網友回復：

                import {
                    useState,
                    useEffect
                } from 'react'
                export default function App() {
                    const [count, setCount] = useState(0);
                    const [values, setValues] = useState({
                        firstValue: 0,
                        secondValue: 0
                    });
                    useEffect(() => {
                        setValues({
                            firstValue: values.secondValue,
                            secondValue: count
                        });
                    }, [count, setCount]);

                    console.log("first value", values.firstValue);
                    console.log("second value", values.secondValue)
                    return <button onClick = {
                            () => setCount(count   1)
                        } > value {
                            count
                        } <
                        /button>;
                }

uj5u.com熱心網友回復：

function usePrevious(value){
  const ref = useRef();

  useEffect(()=>{
    ref.current = value;
  },[value]);

  return ref.current;
}

function App() {
  const [count, setCount] = React.useState(0);  

  const firstValue = usePrevious(count)
  const secondValue = count

  return <button onClick={() => setCount(count 1)}> value {count}</button>;
}

ReactDOM.render(<App count={0}/>, document.getElementById('root'))

uj5u.com熱心網友回復：

也許另一個狀態變數可以負責這部分？

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>

標籤：javascript 反应

上一篇：材質UI上的IconButton懸停效果

下一篇：如何在React回呼后動態更改狀態的物件值？