React Hooks (useState)의 푸시 방법?

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

예 : setState 푸시 예 ?

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

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

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

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

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

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

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

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

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")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

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

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

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

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

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

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;
        });
    };

사용자 지정 상태 끝에 데이터 배열을 추가 할 수 있습니다.

  const [vehicleData, setVehicleData] = React.useState<any[]>([]);
  setVehicleData(old => [...old, ...newArrayData]);

예를 들어, 아래에 axios의 예가 나타납니다.

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        {
          url: `http://localhost:4000/api/vehicle?page=${page + 1}&pageSize=10`,
          method: 'get',
        }
      );
      setVehicleData(old => [...old, ...result.data.data]);
    };

    fetchData();
  }, [page]);

useState의 개체 배열에 개체를 푸시하기 위해 위의 방법을 시도했지만 TypeScript를 사용할 때 다음 오류가 발생 했습니다 .

유형 'TxBacklog [] | undefined '에는 iterator를 반환하는'Symbol.iterator '메서드가 있어야합니다 .ts (2488)

tsconfig.json의 설정은 분명히 옳았습니다.

{
   "compilerOptions": {
   "target": "es6",
   "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es6",
],

이 해결 방법으로 문제가 해결되었습니다 (내 샘플 코드).

상호 작용:

   interface TxBacklog {
      status: string,
      txHash: string,
   }

상태 변수 :

    const [txBacklog, setTxBacklog] = React.useState<TxBacklog[]>();

새 개체를 배열로 푸시 :

    // Define new object to be added
    const newTx = {
       txHash: '0x368eb7269eb88ba86..',
       status: 'pending'
    };
    // Push new object into array
    (txBacklog) 
       ? setTxBacklog(prevState => [ ...prevState!, newTx ])
       : setTxBacklog([newTx]);