Блог

Главная - Вопросы по программированию - семантический тип пользовательского интерфейса, правильный тип возвращаемого значения для раскрывающихся параметров

семантический тип пользовательского интерфейса, правильный тип возвращаемого значения для раскрывающихся параметров

#reactjs #typescript #semantic-ui

Вопрос:

Порывшись в Интернете, я пришел к выводу, что должен просто спросить.

У меня есть форма семантического пользовательского интерфейса в React with TypeScript (строгая).

Я пытаюсь предоставить параметры из своего api rest в раскрывающемся списке (выбрать) в форме (обрезанный ненужный код):

Форма[.tsx]:

 <Form.Select options={()=>{getOptions()}} />

И моя функция GetOptions:

 //I put the DropdownItemProps[] type because I thought it would solve my issue
const getOptions = ():DropdownItemProps[] => {
    let options = new Array<DropdownItemProps>();
    //... restful request
    return (options)
}

Машинопись кричит на меня:

 Type '() => void' is missing the following properties from type 'DropdownItemProps[]': pop, push, concat, join, and 27 more.ts(2740).
FormSelect.d.ts(24, 3): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes amp; FormSelectProps amp; { children?: ReactNode; }'

Я не уверен, почему ts определяет мою функцию как '()=>void' (когда я навожу курсор на функцию, она четко определяет ее как () => DropdownItemProps[] ). Честно говоря, я даже не уверен DropdownItemProps[] , что это правильный тип, который мне нужно вернуть из моей getOptions() функции.

Редактировать: просто для ясности, если я изменю вызов на options={()=>getOptions()} options={getOptions} или что-то подобное , я получу тот же результат, но вместо '()=>void' этого он признает возвращаемое значение '()=>DropdownItemProps[]' .

Я в основном искал везде, о чем мог подумать, но в документах Semantic-UI нет ничего о машинописи (что немного раздражает).

Любая помощь будет признательна.

Комментарии:

1. Кроме того , я не был уверен, должен ли я использовать функцию стрелок getOptions , но когда я этого не сделал и просто сделал options={getOptions} , ts предложил «Вы хотели вызвать это выражение?». И даже если я проигнорирую его, он все равно говорит: Type '() => DropdownItemProps[]' is missing the following properties from type 'DropdownItemProps[]': pop, push, concat, join, and 27 more.

2. вам нужно удалить скобки и просто написать ()=>GetOptions() или, если вы хотите, чтобы скобки просто добавляли return перед GetOptions() ()=>>{ return GetOptions()}

3. @Jerome это дает мне то же самое, что я написал в комментарии.

Ответ №1:

вот рабочий пример, похоже, ваша функция GetOptions не возвращает массив объектов

 import React, { FC } from "react";
import { Form } from "semantic-ui-react";

const getOptions = ():DropdownItemProps[]=> {return [{'keyA': 'label A'}, {'keyB': 'label B'}]}


const Test=()=>{
    
    return (

        <Form>
            <Form.Select options={getOptions()} />
            </Form>

    )
}

export {Test}

Комментарии:

1. options={getOptions()} вызовет ли функция немедленно при рендеринге «нет»? Разве не в этом весь смысл введения функции стрелки?

2. но если вы не вызовете функцию, какие параметры будут отображаться ? вот почему реквизит параметров ожидает массив объектов… взгляните на определение выпадающего списка. Это объясняется само собой : export interface DropdownItemProps extends StrictDropdownItemProps { [key: string]: any }

3. Вы правы, я не продумал это до конца.

Метки: ,