reactjs - typescript'te dinamik anahtar adıyla setState yapamıyorum

React bileşeninin durum arayüzünü aşağıdaki gibi tanımladım.

interface IState {
    email: string,
    password: string,
    errors: object
}

ve metin girişindeki değişim olayında aşağıdaki gibi dinamik bir anahtarla durumu ayarlamaya çalışıyorum.

handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {

        this.setState({
            [e.target.name]: e.target.value
        });
    }

Ancak VSCode bana bu hatayı gösteriyor

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'IState | ((prevState: Readonly<IState>, props: Readonly<{}>) => IState | Pick<IState, "email" | "password" | "errors"> | null) | Pick<IState, "email" | "password" | "errors"> | null'.
  Type '{ [x: string]: string; }' is missing the following properties from type 'Pick<IState, "email" | "password" | "errors">': email, password, errorsts(2345)

Her türlü tavsiye memnuniyetle karşılanır.

Cevap #1

Sorun, e.target.name'in IState'in anahtarı olması ve e.target.value'in IState'deki anahtardan gelen ilgili tür olması gerektiğidir, bunu düzeltmek için türü manuel olarak şuna benzer şekilde dönüştürebilirsiniz

this.setState({
            [e.target.name]: e.target.value
    } as Pick<IState, keyof IState>);

ama bu, bu fonksiyon için TypeScript'i devre dışı bırakır, ayrıca bunu herhangi bir türe dönüştürebilirsiniz, ama bu güvenli değildir.

Görünüşe göre bu cevap da sizin için faydalı olabilir

En iyi seçenek ReduxForm kullanmaktır

İlgili makaleler