reactjs - How to specify types in TypeScript? - Stack Overflow

admin管理员组

文章数量:1318775

I am trying to use the code example below in Next.js 15 (TypeScript), but getting the error on the line onChange={setSelectedPerson} and would like to know how to specify the types on passing:

Type error: Type 'Dispatch<SetStateAction<{ id: number; name: string; }>>' is not assignable to type '(value: NoInfer<{ id: number; name: string; }> | null) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'NoInfer<{ id: number; name: string; }> | null' is not assignable to type 'SetStateAction<{ id: number; name: string; }>'.
      Type 'null' is not assignable to type 'SetStateAction<{ id: number; name: string; }>'.

import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">
        {filteredPeople.map((person) => (
          <ComboboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}

I am trying to use the code example below in Next.js 15 (TypeScript), but getting the error on the line onChange={setSelectedPerson} and would like to know how to specify the types on passing:

Type error: Type 'Dispatch<SetStateAction<{ id: number; name: string; }>>' is not assignable to type '(value: NoInfer<{ id: number; name: string; }> | null) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'NoInfer<{ id: number; name: string; }> | null' is not assignable to type 'SetStateAction<{ id: number; name: string; }>'.
      Type 'null' is not assignable to type 'SetStateAction<{ id: number; name: string; }>'.

import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">
        {filteredPeople.map((person) => (
          <ComboboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}

• reactjs
• typescript
• next.js
• headless-ui

Share Improve this question Follow edited Jan 21 at 11:18 jonrsharpe 122k3030 gold badges267267 silver badges474474 bronze badges asked Jan 21 at 11:08 KinjoKinjo 1,4561212 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It looks like your useState for selectedPerson infers the type of people[0] which is Person.

const [selectedPerson, setSelectedPerson] = useState(people[0])

The typescript error is saying that the function you pass to onChange should have an argument with a nullish value, so you can either adjust the type of selectedPerson to include null or you can choose to do something else when you get null back from the onChange.

Adding null to the selectedPerson type

const [selectedPerson, setSelectedPerson] = useState<Person | null>(people[0])

As an example, defaulting to the original value on null

<Combobox 
  value={selectedPerson}
  onChange={
    (value) => {
      if (value) {
        setSelectedPerson(value);
      } else {
        setSelectedPerson(people[0]);
      }
    }
  } 
  onClose={() => setQuery('')}>

本文标签： reactjsHow to specify types in TypeScriptStack Overflow