확산 인수는 태플 형식을 갖거나 rest 매개 변수로 전달되어야 합니다. React

확산 인수는 태플 형식을 갖거나 rest 매개 변수로 전달되어야 합니다. React

이 코드가 있습니다.Typescript:

const [history, setHistory] = useState([Array(9).fill(null)]);

const newHistory = history.slice(0, currentStep + 1);

분산 연산자를 사용하여 새 상태를 설정하는 경우:

setHistory(...newHistory);

오류가 있습니다.

확산 인수는 태플 유형을 가지거나 rest 매개 변수로 전달되어야 합니다.

이걸 어떻게 타이핑하면 좋을지 누가 좀 도와줄래요?

일반적으로 apply를 사용하면 이러한 오류를 방지할 수 있습니다.

setHistory(...newHistory); //drops error

setHistory.apply(null, newHistory) //works

이 예에서는 문제가 있습니다.이력을 초기화하면[[null, null, null...]]그럼 가져와라, 잘라라.[[null, null, ...], ...]로 되돌리려고 합니다.setHistory([null, null], null).

그냥 이 두 가지면 되는 것 같아요setHistory(newHistory);

간단히 말하면:

분산 연산자를 직접 사용하기 때문에 여러 개의 인수를 전달해야 합니다.useState기능하고 있습니다만,useState함수는 단일 인수만 허용합니다.대신 스프레드 연산자를 사용하여 단일 배열을 만들고 전달하십시오.

const newObject = [...newHistory];
setHistory(newObject);

// or, even simpler: 
setHistory([...newHistory]);

// NOT the below - this is passing in multiple arguments.
setHistory(...newHistory);

나한텐 완벽하게 먹혔어!

setHistory(...(newHistory as []));

사용시useState, 인덱스1반환된 튜플은setHistory1개의 인수(새로운 값)만 사용할 수 있습니다.첫 번째 게시물의 예는 이력을 잠재적으로 8개의 인수로 확장하는 것입니다.다음과 같이 간단한 어레이로 전달해야 합니다.setHistory(newHistory).

만약 항상 이전 상태를 수정하는 것이 목적이라면, 전화하겠습니다.setHistory(previousHistory => previousHistory.slice(x, y)).

또한! Typescript의 경우 다음과 같이 useState 유형을 선언해야 합니다.useState<History[]>(Array(9).fill(null));타입을 선언하지 않고 타이프 스크립트는 이 경우 원하는 타입이 아닐 수 있는 것을 추론합니다.

useState의 유형을 항상 선언할 필요는 없습니다.사실, 가능한 한 유형 추론을 사용하는 것이 좋습니다.초기값이 null이거나 정의되지 않은 경우 유형 스크립트에서 유형 추론을 사용할 수 없습니다.

이 값은 변수에 할당하여 해결할 수 있습니다.

const latestHistory = {...newHistory}

setHistory(latestHistory);

언급URL : https://stackoverflow.com/questions/68768781/a-spread-argument-must-either-have-a-tuple-type-or-be-passed-to-a-rest-parameter