javascript - Flow type - Index signature declaring the expected keyvalue type is missing in GenericType - Stack Overflow

admin管理员组

文章数量:1313251

I'm having issues to access a object property dynamically with a Generic Type . Here is the code:

import React, { useState } from 'react'

function useForm<FormValues>(initialValues: FormValues) {
    const [formValues, setFormValues] = useState<FormValues>(initialValues)

    function getValue(fieldName: string) {
        return formValues[fieldName]
    }
}

Here is the error:

7: return formValues[fieldName] ^ Cannot get formValues[fieldName] because an index signature declaring the expected key / value type is missing in FormValues [1]. References: 4: const [formValues, setFormValues] = useState(initialValues) ^ [1]

Here is the Try Flow link: +cAZlBCHAORSoYsBQXd+AdhmAR+BYgDFoIADySoIAGooANviSEAfAApg-YDGAqlq9QC44cxSrWEAlLi4BINCMLwA2nSnGb2YjEsfdQBdOABeMVJySllva3VtXX1DZSC7LjhMuAysvkEDETgAcyQYIK06YCRlABMAORQQJHM3KF0i+xwczMd2GHwoUS95NM8q2oam4O6aLmogA

Thanks for the help.

I'm having issues to access a object property dynamically with a Generic Type . Here is the code:

import React, { useState } from 'react'

function useForm<FormValues>(initialValues: FormValues) {
    const [formValues, setFormValues] = useState<FormValues>(initialValues)

    function getValue(fieldName: string) {
        return formValues[fieldName]
    }
}

Here is the error:

7: return formValues[fieldName] ^ Cannot get formValues[fieldName] because an index signature declaring the expected key / value type is missing in FormValues [1]. References: 4: const [formValues, setFormValues] = useState(initialValues) ^ [1]

Here is the Try Flow link: https://flow/try/#0JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzkgMowoxJwC+cAZlBCHAORSoYsBQXd+AdhmAR+BYgDFoIADySoIAGooANviSEAfAApg-YDGAqlq9QC44cxSrWEAlLi4BINCMLwA2nSnGb2YjEsfdQBdOABeMVJySllva3VtXX1DZSC7LjhMuAysvkEDETgAcyQYIK06YCRlABMAORQQJHM3KF0i+xwczMd2GHwoUS95NM8q2oam4O6aLmogA

Thanks for the help.

• javascript
• reactjs
• flowtype

Share Improve this question Follow asked May 17, 2019 at 13:03 Bruno QuaresmaBruno Quaresma 10.7k77 gold badges3838 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Lets simplify the question:

I. useStatehave the following type:

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {}

II. For us is important returned type:

export function simpleUseState<S>(initialState: S): [S] {}

III. Simplified version:

declare var simpleUseState: <S>(initialState: S)=> [S];

function useForm<FormValues>(initialValues: FormValues, fieldName: string) {
    const [formValues] = simpleUseState<FormValues>(initialValues)

    return formValues[fieldName];
}

And we have the same error

Because a Generic type has no key/value signature, for example it can be a number or null - we need to add constraints on Generic:

import React, { useState } from 'react'

function useForm<FormValues: {[string]: string}>(initialValues: FormValues) {
//                         ^ constraint
    const [formValues, setFormValues] = useState<FormValues>(initialValues)

    function getValue(fieldName: string) {
        return formValues[fieldName]
    }
}

本文标签：