Предупреждение: используйте реквизиты `defaultValue` или` value` в <select>вместо установки `selected` в <option> - PullRequest
Новая
       27

Предупреждение: используйте реквизиты `defaultValue` или` value` в <select>вместо установки `selected` в <option>

0 голосов
/ 07 мая 2020

У меня есть этот компонент Select (с использованием material-ui / core 4.9.13), и у меня есть это предупреждение в моей консоли .. это компонент рендеринга, и это то, что я делаю {... otherProps} {... поле}. Я читал, что могу исправить это с помощью такой опции, но у меня это не работает. Кто-нибудь может мне помочь? 

  <Select className={props.selectClassName}
                onChange={handleSelectChange} // does setValue on this field
                onOpen={handleOnOpen} // does something graphic
                displayEmpty={true}
                variant="outlined"
                {...otherProps}
                {...field}
                value={field.value || ''}
        >
            {OPTIONS_ARR
                .map((obj: { label: string, value: string, country?: string }, index: number) =>
                <option
                    className={`${classes.optionStyle} c-pointer`}
                    key={index}
                    value={obj.value}
                    defaultValue={field.value}
                >
                    {obj.label}
                </option>)}
        </Select>

Полное предупреждение здесь 

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

1 Ответ

0 голосов
/ 07 мая 2020

попробуйте это: 

 <Select className={props.selectClassName}
            onChange={handleSelectChange} // does setValue on this field
            onOpen={handleOnOpen} // does something graphic
            displayEmpty={true}
            variant="outlined"
            {...otherProps}
            {...field}
            value={field.value || ''}
    >
        {OPTIONS_ARR
            .map((obj: { label: string, value: string, country?: string }, index: number) =>
            <option
                className={`${classes.optionStyle} c-pointer`}
                key={index}
                value={obj.value}
            >
                {obj.label}
            </option>)}
    </Select>
...