React의 useState 훅을 사용할 때 nullable 상태를 입력하는 올바른 방법

React의 useState 훅을 사용할 때 nullable 상태를 입력하는 올바른 방법

타이핑하는 방법을 알아내는 데 어려움을 겪고 있어요.useState이 함수는 태플을 반환하기 때문입니다.본질적으로, 저는null초기값으로email즉, 여기서 빈 문자열을 사용할 수 없다고 가정합니다.

그 후, 나는setEmail이 상태 값을 갱신하는 함수(전자 메일을 문자열로 받아들임)입니다.

이상적으로 나는 나의 타자를 치고 싶다.useState따라서 가능한 경우 이메일이 문자열이거나 null일 것으로 예상합니다.현재로선 그것만을 상속받고 있다.null

import * as React from "react";

const { useState } = React;

function Example() {
  const [state, setState] = useState({ email: null, password: null });

  function setEmail(email: string) {
    setState(prevState => ({ ...prevState, email }))
  }

  return <p>{state.email}</p>
}

다음 에러가 반환됩니다.setEmail이후 기능하다stringin function 인수가 올바른 유형이 아닙니다.null에 명시되어 있다useState()

[ts]
Argument of type '(prevState: { email: null; password: null; }) => { email: string; password: null; }' is not assignable to parameter of type 'SetStateAction<{ email: null; password: null; }>'.
  Type '(prevState: { email: null; password: null; }) => { email: string; password: null; }' is not assignable to type '(prevState: { email: null; password: null; }) => { email: null; password: null; }'.
    Type '{ email: string; password: null; }' is not assignable to type '{ email: null; password: null; }'.
      Types of property 'email' are incompatible.
        Type 'string' is not assignable to type 'null'. [2345]
(parameter) prevState: {
    email: null;
    password: null;
}

현재 TypeScript 컴파일러는 다음과 같은 유형을 생각합니다.email그리고.password이다null(다른 값은 없습니다).이 문제는 에 명시적인 유형 파라미터를 지정함으로써 해결할 수 있습니다.useState타입이 되도록 호출하다email그리고.password라고 알려져 있다string또는null.

const { useState } = React;

function Example() {
  const [state, setState] = useState<{email: null | string, password: null | string}>({ email: null, password: null });

  function setEmail(email: string) {
    setState(prevState => ({ ...prevState, email }))
  }

  return <p>{state.email}</p>
}

이 문제는 이미 몇 가지 점에서 해결되었습니다.

https://dev.to/busypeoples/notes-on-typescript-react-hooks-28j2

https://codewithstyle.info/Using-React-useState-hook-with-TypeScript/

TLDR: 빈 초기 상태가 있는 경우 type 인수를 setState로 전달합니다.

예:

const [email, setEmail] = useState<string>();

TS 매핑 유형을 사용하여 가독성을 높이고 null 값보다 정의되지 않은 것을 선호할 수 있습니다.

const { useState } = React;

function Example() {
  const [state, setState] = useState<Partial<{email: string, password: string}>>();

  function setEmail(email: string) {
    setState(prevState => ({ ...prevState, email }))
  }

  return <p>{state.email | ""}</p>
}

언급URL : https://stackoverflow.com/questions/53338922/correct-way-to-type-nullable-state-when-using-reacts-usestate-hook