React에서 useState 후크를 사용하여 배열에 요소를 어떻게 추가하나요?

React에서 useState를 사용하여 배열에 요소 푸시

React에서 useState 후크를 사용할 때 업데이트를 호출하여 상태 배열을 수정할 수 있습니다. 방법. 이 메서드는 다음과 같이 상태 항목을 초기화할 때 제공됩니다.

<code class="js">const [theArray, setTheArray] = useState(initialArray);</code>

배열에 새 요소를 추가하려면 업데이트된 배열이나 새 배열을 생성하는 함수를 setTheArray 메서드에 전달합니다. 후자는 일반적으로 React의 상태 업데이트가 비동기식이고 일괄적으로 발생할 수 있기 때문에 사용됩니다.

<code class="js">setTheArray(oldArray => [...oldArray, newElement]);</code>

또는 특정 사용자 이벤트(예: 클릭)에 대한 핸들러 내에서만 업데이트를 수행하는 경우 이 단축 구문으로 충분할 수 있습니다. , 마우스 움직임은 아님):

<code class="js">setTheArray([...theArray, newElement]);</code>

React에서 렌더링 플러시를 트리거하는 이벤트를 "이산 이벤트"라고 합니다.

라이브 예:

<code class="js">const { useState, useCallback } = React;
function Example() {
  const [theArray, setTheArray] = useState([]);
  const addEntryClick = () => {
    setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
  };
  return [
    <input type="button" onClick={addEntryClick} value="Add" />,
    <div>
      {theArray.map(entry => <div>{entry}</div>)}
    </div>
  ];
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);</code>

위 내용은 React에서 useState 후크를 사용하여 배열에 요소를 어떻게 추가하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!