reactjs - Typescript useState: Argüman ile Çocukta SetState

setState'i bir alt bileşene nasıl geçirebilirim ve c argümanını TypeScript hatası olmadan nasıl kullanabilirim?

Ebeveyn: setState'i aktarmak

export interface State {
    value1: string;
    value2: string;
}

const Parent = () => {
    const [state, setState] = useState<State>({
        value1: "test",
        value2: "test",
    });

    return (
        <React.Fragment>
            <Child setState={setState} />
        </React.Fragment>
    );
};

export default Parent;

Çocuk: argüman olarak c ile setState kullan, c bir tür hatası ile altı çizili olarak okunuyor

type Props = {
    setState: Dispatch<State>;
};

const Child: React.FC<Props> = ({ setState }) => {
    return (
        <React.Fragment>
            <button
                onClick={() => {
                    //c is read underlined: Argument of type '(c: any) => any' is not assignable 
                    //to parameter of type 'State'.
                    //Type '(c: any) => any' is missing the following properties from type 
                    //'State': value1, value2
                    setState((c) => {
                        return {
                            ...c,
                            value2: "HelloWorld",
                        };
                    });
                }}
            />
        </React.Fragment>
    );
};

export default Child;

Cevap #1

bunu deneyin, <any> öğesini durum türünüzle değiştirebilirsiniz.

type Props = {
    setState: React.Dispatch<React.SetStateAction<any>>;
};

Cevap #2

Öncelikle, fonksiyonel bileşenler kullandığınız için, durumu tek bir durum nesnesine sahip olmak yerine ayrı değişkenlere ayırmalısınız. { value1: string; value2: string; } yerine, useState'e iki ayrı çağrı yapın. Bu, ileride mantığı basitleştirecektir.

const Parent = () => {
    const [value1, setValue1] = useState('test');
    const [value2, setValue2] = useState('test');

    return (
        <React.Fragment>
            <Child setValue2={setValue2} />
        </React.Fragment>
    );
};

(Parent için State adına ayrı bir tür bildirimi gerekmediğini unutmayın, çünkü bu otomatik olarak çıkarılabilir)

Anahtar, çocuğun setValue2 özelliğini doğru şekilde yazmaktır. Üstteki setValue2 üzerine geldiğinizde, türünün şun olduğunu göreceksiniz:

React.Dispatch<React.SetStateAction<string>>

Yani bunun için Child'ın sahip olması gerekenler bunlar:

const Child = ({ setValue2 }: { setValue2: React.Dispatch<React.SetStateAction<string>> }) => {
    return (
        <React.Fragment>
            <button
                onClick={() => {
                    setValue2('HelloWorld');
                }}
            />
        </React.Fragment>
    );
};

İlgili makaleler