使用数组作为反应钩子 useState

Question

I am using array as value of useState

also I need to change only one element and set it as state

const Main = () => {
  const [test, setTest] = useState([1, 2, 3]);

    function TestFunction({state, setState}): JSX.Element {
        return (
          <div
            style={{
              border: '1px solid black', height: '100px', width: '100%', display: ' block',
            }}
            onClick={() => {
              const qwer = state;
              qwer[2] -= 1;
              setState(qwer);
    
              console.log('clicked', state);
            }}
          >{test}
          </div>
        );
      }
    
    return (
        <TestFunction state={test} setState={setTest} />
    );
}

console says that the value "test" has been changed,

But it never rerenders it.

Am I using wrong? If so, I want to ask some solution please.

Thank you very much.

Answer 1

You are not making a copy of an array with the = operator. Infact you are mutating the state there. Use ... spread operator:

onClick={() => {
              const qwer = [...state];
              qwer[2] -= 1;
              setState(qwer);
    
              console.log('clicked', state);
            }}

Answer 2

React works on the principle of immutability ; whenever an element changes in your state, you shouldn't mutate the underlying value, but instead construct a brand new object with your changes. This is the only way for React to realize the state has changed as under the hood it does oldState===newState which will always pass, even if you change an index of an array (since they both refer to the same place in memory).

To apply this here, you would do:

const Main = () => {
  const [test, setTest] = useState([1, 2, 3]);

    function TestFunction({state, setState}): JSX.Element {
        return (
          <div
            style={{
              border: '1px solid black', height: '100px', width: '100%', display: ' block',
            }}
            onClick={() => {
              // ---------- New Changes ---------- \\
              // [...state] clones the array here
              const qwer = [...state];
              
              qwer[2] -= 1;
              setState(qwer);
              // Note: This will print the old value, you will need to
              // wait for the next re-render to get the new state, or 
              // just log qwer 
              console.log('clicked', qwer);
            }}
          >{test}
          </div>
        );
      }
    
    return (
        <TestFunction state={test} setState={setTest} />
    );
}