useState를 사용하여 React Hooks의 배열에 요소를 어떻게 추가하나요?

React Hooks의 배열에 요소 푸시(useState)

React Hooks의 상태 배열을 처리할 때 기존 방법은 더 이상 적용할 수 없습니다. . 대신 useState는 각 상태 항목에 대한 업데이트 메서드를 제공합니다.

const [arrayState, setArrayState] = useState(initialState);

arrayState에 새 요소를 추가하려면 새 배열이나 새 배열을 생성하는 함수(일반적으로 후자)를 사용하여 setArrayState를 호출할 수 있습니다. 상태 업데이트의 비동기적 특성으로 인해:

setArrayState(prevArray => [...prevArray, newElement]);

클릭 이벤트와 같은 특정 개별 이벤트에서는 콜백:

setArrayState([...arrayState, newElement]);

다음은 콜백 사용을 보여주는 실제 예입니다.

<code class="javascript">import React, { useState, useCallback } from "react";

function Example() {
  const [arrayState, setArrayState] = useState([]);
  const addEntryClick = () => {
    setArrayState(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
  };
  return [
    <input type="button" onClick={addEntryClick} value="Add" />,
    <div>
      {arrayState.map(entry => (
        <div key={entry}>{entry}</div>
      ))}
    </div>,
  ];
}

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

효율적인 조정과 최적의 성능을 위해 React에서 목록을 렌더링하려면 key prop이 필수적이라는 점을 기억하세요.

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