reactjs - React js想要循环通过反应选择多个页面而不是连接每个页面
问题描述
目前我已经创建了一个选择下拉菜单,它使用 concat 调用第 1 页和第 2 页的所有创建的功能,我想让这个过程动态化,这样就不用输入每个页面来引用 Select 下拉菜单,猜测包括循环过程将使此功能动态化。有人可以告诉我如何实现这一点。
每页的默认页面项目数为 20。
const GeneralInputFormBlock = ({ formik, isEdit }) => {
const classes = useStyle();
const { touched, errors } = formik;
const [features, setFeatures] = useState([]);
const loadFeature = async () => {
let page1 = await search({
_entity: 'Feature',
featureCode: 'FTR',
_select: 'featureCode,id',
_page: 1,
});
let page2 = await search({
_entity: 'Feature',
_select: 'featureCode,id',
featureCode: 'FTR',
_page: 2,
});
const allRules = page1.data.concat(page2.data);
setFeatures(allRules);
};
return (
<GridItem xs={8}>
<FormControl className={classes.formControl}>
<InputLabel>Feature Ids*</InputLabel>
<Select
multiple
input={<Input id="select-feature-ids" />}
renderValue={selected => (
<div className={classes.chips}>
{selected.map(value => (
<Chip
key={value}
label={
features.length &&
features.filter(f => f.id === value)[0].featureCode
}
className={classes.chip}
/>
))}
</div>
)}
{...formik.getFieldProps('featureIds')}
>
{features.map(({ featureCode, id }) => (
<MenuItem key={featureCode} value={id}>
{featureCode}
</MenuItem>
))}
</Select>
{errors.featureIds && touched.featureIds && (
<Error msg={errors.featureIds} />
)}
</FormControl>
</GridItem>
</GridContainer>
</GridItem>
</Card>
);
};
解决方案
你可以使用for循环或while循环吗?您需要确定如何知道何时完成提取,以确定哪个选项更合适。
for(let i = 1; i < numOfPages; i++) {
let page = await search({
_entity: 'Feature',
featureCode: 'FTR',
_select: 'featureCode,id',
_page: i,
});
setFeatures(features.concat(page));
}
let page = [];
let counter = 1;
while(page) {
page = await search({
_entity: 'Feature',
featureCode: 'FTR',
_select: 'featureCode,id',
_page: counter,
});
setFeatures(features.concat(page));
counter++;
}