[javascript] React Hooks (useState)의 푸시 방법?

Program / 글쓴이

useState 배열 React 후크 내부에 요소를 푸시하는 방법은 무엇입니까? 반응 상태의 오래된 방법입니까? 아니면 새로운 것?

예 : setState 푸시 예 ?

답변

를 사용 useState하면 상태 항목에 대한 업데이트 메서드를 가져올 수 있습니다.

const [theArray, setTheArray] = useState(initialArray);

그런 다음 새 요소를 추가하려는 경우 해당 함수를 사용하고 새 배열 또는 새 배열을 생성 할 함수를 전달합니다. 일반적으로 후자는 상태 업데이트가 비동기적이고 때로는 일괄 처리되기 때문입니다.

setTheArray(oldArray => [...oldArray, newElement]);

당신이 경우 때때로 당신은, 그 콜백 양식을 사용하지 않고 멀리 얻을 수 있습니다 만 같은 특정 특정 사용자 이벤트 핸들러의 배열을 갱신 click(하지만 같은 mousemove) :

setTheArray([...theArray, newElement]);

React가 렌더링이 플러시되도록 보장하는 이벤트는 여기에 나열된 “이산 이벤트” 입니다.

라이브 예제 (에 콜백 전달 setTheArray) :

코드 스 니펫 표시

에 대한 유일한 업데이트 theArray는 click이벤트에 하나 ( “이산”이벤트 중 하나) 이기 때문에 다음 에서 직접 업데이트 할 수 있습니다 addEntry.

코드 스 니펫 표시

답변

좀 더 확장하기 위해 다음은 몇 가지 일반적인 예입니다. 로 시작:

const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);

배열 끝에서 요소 푸시

setTheArray(prevArray => [...prevArray, newValue])

개체 끝에서 요소 푸시 / 업데이트

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

객체 배열 끝에서 요소 푸시 / 업데이트

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

배열 객체의 끝에 요소를 밀어 넣습니다.

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

여기에도 몇 가지 작업 예제가 있습니다.
https://codesandbox.io/s/reacthooks-push-r991u

답변

React 클래스 컴포넌트에서 “정상”상태로하는 것과 같은 방법입니다.

예:

function App() {
  const [state, setState] = useState([]);

  return (
    <div>
      <p>You clicked {state.join(" and ")}</p>
      //destructuring
      <button onClick={() => setState([...state, "again"])}>Click me</button>
      //old way
      <button onClick={() => setState(state.concat("again"))}>Click me</button>
    </div>
  );
}

답변

// Save search term state to React Hooks with spread operator and wrapper function

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])

https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

답변

setTheArray([...theArray, newElement]);가장 간단한 대답이지만 theArray 항목의 변형에주의하십시오 . 배열 항목의 전체 복제를 사용합니다.

답변

가장 권장되는 방법은 래퍼 함수와 분산 연산자를 함께 사용하는 것입니다. 예를 들어 다음 name과 같은 상태를 초기화 한 경우

const [names, setNames] = useState([])

다음과 같이이 배열에 푸시 할 수 있습니다. 

setNames(names => [...names, newName])

도움이 되었기를 바랍니다.

답변

특정 인덱스 이후에 푸시하려면 다음과 같이 할 수 있습니다.

   const handleAddAfterIndex = index => {
       setTheArray(oldItems => {
            const copyItems = [...oldItems];
            const finalItems = [];
            for (let i = 0; i < copyItems.length; i += 1) {
                if (i === index) {
                    finalItems.push(copyItems[i]);
                    finalItems.push(newItem);
                } else {
                    finalItems.push(copyItems[i]);
                }
            }
            return finalItems;
        });
    };