React js 想要遍历 react select 多个页面而不是连接每个页面

Question

目前我已经创建了一个 select 下拉菜单，它使用 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>
);
};

Answer 1

你可以使用 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++;
}

React js 想要遍历 react select 多个页面而不是连接每个页面

React js want to loop through react select multiple pages instead of concat each page

reactjs

formik