web-dev-qa-db-ja.com

ReactのuseStateフックを使用するときにnull許容状態を入力する正しい方法

タプルを返すため、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は、useState()で指定されたstringの有効なタイプではないため、null関数に対して次のエラーが返されます

_[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;
}
_
reactjstypescriptreact-hooks
12
Ilja

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>
}
0
Adrien Gardou