재료.UI 선택 설정 값이 항상 범위를 벗어남
소재가 있다UI 코드를 선택하면 value 파라미터를 동적으로 처리합니다.문제는 어떤 값을 설정해도 항상 범위를 벗어나고 유효한 값으로 값이 표시된다는 것입니다.
SelectInput.js:291 Material-UI: you have provided an out-of-range value `100001,250000` for the select (name="followers") component.
Consider providing a value that matches one of the available options or ''.
The available values are `0,50000`, `50001,100000`, `100001,250000`, `250001,500000`, `500001,750000`, `750001,9007199254740991`.
(anonymous) @ SelectInput.js:291
내 코드는 다음과 같습니다.
const followers = [
{ '0-50k': [0, 50000] },
{ '50k-100k': [50001, 100000] },
{ '100k-250k': [100001, 250000] },
{ '250k-500k': [250001, 500000] },
{ '500k-750k': [500001, 750000] },
{ '+1M': [750001, Number.MAX_SAFE_INTEGER] },
];
<div className={classes.formGroup}>
<InputLabel id="followersL">Followers</InputLabel>
<Select
className={classes.field}
fullWidth
id="followers"
labelId="followersL"
margin="dense"
displayEmpty
name="followers"
onChange={(event) => setValue(event.target.value)} //I've updated the sate with the new value
value={
filters.basicInfo.followers
? value
: ''
}
variant="outlined"
>
{followers.map((element) => (
<MenuItem
value={element[Object.keys(element)]}
key={Object.keys(element)[0]}
>
{Object.keys(element)[0]}
</MenuItem>
))}
</Select>
</div>
메시지에서 볼 수 있듯이 선택한 값은100001,250000범위 내 예에 있습니다.100001,250000
어디가 문제입니까?
이 defaultValue =" "이렇게 추가합니다.< Select ... defaultValue = " >
이 조언은 다른 사용자에게 도움이 될 수 있습니다.Select 요소의 값이 object인 경우 Options 목록에서 객체의 정확한 인스턴스여야 합니다.예를 들어 다음과 같습니다.
const [test, setTest] = useState("");
//list of options for Material UI select
const testOptions = [
{name: "123"},
{name: "456"},
{name: "769"},
];
//let's try to change value to {name: "123"} using JS
setTest(testOptions[0]); // everything is OK
setTest({name: "123"}); // Error! You provided out of range value!
값을 문자열화하면 이 기능이 작동합니다.
element[Object.keys(element)] + ""}
서버에 결과를 송신하기 전에 원래의 어레이 포맷이 필요한 경우는, 다음과 같은 기능을 사용할 수 있습니다.
const strToArr = str => str.split(',').map(item => Number(item))
여기 제 코드에서 저는 당신이 제공한 예를 사용하여 당신의 오류를 재현할 수 있었습니다.그러나 값을 문자열화하면 오류가 제거되고 예상대로 작동합니다.
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const followers = [
{ "0-50k": [0, 50000] },
{ "50k-100k": [50001, 100000] },
{ "100k-250k": [100001, 250000] },
{ "250k-500k": [250001, 500000] },
{ "500k-750k": [500001, 750000] },
{ "+1M": [750001, Number.MAX_SAFE_INTEGER] }
];
const [value, setValue] = React.useState("");
const handleChange = event => setValue(event.target.value);
return (
<div>
<p>value - {value}</p>
<div className={classes.formGroup}>
<InputLabel id="followersL">Followers</InputLabel>
<Select
className={classes.field}
fullWidth
id="followers"
labelId="followersL"
margin="dense"
displayEmpty
name="followers"
onChange={handleChange}
value={value}
variant="outlined"
>
{followers.map(element => (
<MenuItem
value={element[Object.keys(element)] + ""}
key={Object.keys(element)[0]}
>
{Object.keys(element)[0]}
</MenuItem>
))}
</Select>
</div>
</div>
);
}같은 문제가 발생했습니다(범위를 벗어난 값을 제공했습니다).number디폴트값으로 되어 있는 상태-1:
const [selectedAccountId, setSelectedAccountId] = useState<number>(-1);
이 문제의 해결방법은 빈 문자열을 할당하는 것입니다.value재료 UI의 속성Select디폴트값을 사용하지 않고 컴포넌트-1:
value={selectedAccountId === -1 ? '' : selectedAccountId}
전체 구성 요소 예제:
<FormControl fullWidth>
<InputLabel>Account</InputLabel>
<Select
id="account"
value={selectedAccountId === -1 ? '' : selectedAccountId}
onChange={event => {
setSelectedAccountId(Number(event.target.value));
}}>
{allAccounts.map((account, index) => (
<MenuItem key={index} value={account.id}>
{account.exchange} ({account.id})
</MenuItem>
))}
</Select>
</FormControl>
조사 결과, 이 경고가 발생한 이유는 MUI Select가 Axios 응답에서 가져온 첫 번째 렌더링에서는 사용할 수 없었던 옵션 목록을 매핑하려고 했기 때문입니다.
제가 만든 컴포넌트는DropdownMUI Select 컴포넌트를 렌더링합니다.네 가지 소품을 제공했습니다.
options: 옵션 목록,initialValue: 디폴트값.의 인스턴스마다 디폴트값이 다릅니다.Dropdown의 첫 번째 항목이 아닌 컴포넌트options항상 표시
...그리고 이 논의의 대상이 되지 않는 다른 2개의 소품.
즉, 각 인스턴스에서Dropdown컴포넌트, 그 컴포넌트가options목록에는 데이터가 있으며, 그 데이터만 렌더링됩니다.그리고 이것이 콘솔에서 경고를 삭제한 것입니다.내가 한 일을 일목요연하게 설명:
{viewsData.length > 0 && (
<Dropdown
options={viewsData}
initialValue={7}
{...otherProps}
/>
)}
이것은 오랫동안 나를 괴롭혔다.이게 누군가에게 도움이 되길 바라.
하고, 과 그 것을 를 들어, 이 「Default」가 「Default」라고 하는 인 경우는, 「Default」를 「Default」로 합니다.예를 들어, 디폴트값이 다음과 같은 문자열인 경우 등입니다.'' 나머지 은 '먹다'입니다.objects 기본값이 ''가합니다.[] ★★★★★★★★★★★★★★★★★」{} 가장 는 「」입니다.null
@Ait Friha Zaid 응답에 추가합니다.
defaultValue 속성도 추가했지만 옵션도 추가했습니다.
const values = ['option 1', 'option 2', 'option 3'];
<FormControl fullWidth>
<InputLabel>{title}</InputLabel>
<Select
defaultValue="choose"
label={title}
onChange={e => func({...state, [keyName]: e.target.value}) }
>
<MenuItem disabled value="choose">Choose Option</MenuItem>
{values.map((value) => (
<MenuItem value={value} key={value}>{value}</MenuItem>
))}
</Select>
</FormControl>
이렇게 하면 기본 옵션인 플레이스 홀더로 기능하는 옵션이 항상 비활성화됩니다.또, 폼 검증을 실시하는 경우는, 유저가 옵션을 변경할 때까지, 상태는 변경되지 않습니다.
언급URL : https://stackoverflow.com/questions/60813040/materialui-select-set-value-is-always-out-of-range
'programing' 카테고리의 다른 글
| Angular에서 ng-options를 사용하여 선택을 필터링하려면 어떻게 해야 합니까? (0) | 2023.03.05 |
|---|---|
| LISTAGG 함수: "문자열 연결 결과가 너무 깁니다." (0) | 2023.03.05 |
| 커스터마이즈된HTPHeader 필드를 갖춘 JSON Post (0) | 2023.03.05 |
| JSON 오브젝트 Node.js 작성 방법 (0) | 2023.03.05 |
| phpMyAdmin DisplayResults 오류입니다.php #1226 (0) | 2023.03.05 |