简体   繁体   English

Material-UI和Redux-form,re渲染选项点击选择,如何防止?

[英]Material-UI and Redux-form, re renders options clicked on select, how to prevent it?

So my problem is that I'm rendering options dynamically, when I click on the select or the options the component re-renders and changes options so I need to click two times to select an option in select.所以我的问题是我正在动态渲染选项,当我单击选择或组件重新渲染和更改选项时,我需要单击两次以选择选择中的选项。 It is re-rendering cause it re-runs the function, should I just store the value true/false in react hook and change it on the first run so it doesn't re-run the function?它正在重新渲染,因为它重新运行该函数,我是否应该只将值 true/false 存储在 react 钩子中并在第一次运行时更改它,以便它不会重新运行该函数?

Here is my code这是我的代码

This is the function that creates the options renderOptions function这是创建选项 renderOptions 函数的函数

const renderOptions = () => {
    const days = [];
    function dateWithMonthsDelay(months) {
      const date = new Date();
      date.setDate(date.getDate() + months);
      return date;
    }
    let i = 0;
    for (let d = new Date(); d <= dateWithMonthsDelay(7); d.setDate(d.getDate() + 1)) {
      if (isAuthenticated && user) {
        const u = user.name.match(/\d/g);
        if (u) {
          const us = user.name.match(/\d/g).join('');
          if (new Date(d).getDay() === 1
          && (us === '25'
          || us === '26'
          || us === '27'
          || us === '3')) {
            days.push(new Date(d));
          } else if (new Date(d).getDay() === 3 && (
            us === '24'
          || us === '28'
          || us === '22'
          || us === '8'
          || us === '9'
          || us === '14'
          )) {
            days.push(new Date(d));
          } else if ((new Date(d).getDay() === 2 || new Date(d).getDay() === 5) && (
            us === '17'
          || us === '21'
          || us === '7'
          || us === '2'
          || us === '4'
          || us === '18'
          || us === '20'
          || us === '23'
          || us === '10'
          || us === '12'
          || us === '16'
          || us === '5'
          || us === '29'
          || us === '30'
          || us === '11'
          || us === '19'
          )) {
            days.push(new Date(d));
          }
        }
      }
    }
    return days.map((d) => (
      <>
        {i === 0 ? (<option aria-label="None" value="" />) : null}
        {i += 1}
        <option value={d}>
          {moment(d).format('dddd - Do MMMM YYYY')}
        </option>
      </>
    ));
  };

This is the return from Form component这是 Form 组件的返回

<Header>
      <Container component="main" maxWidth="md">
        <div className={classes.paper}>
          <Typography component="h1" variant="h5">
            GOLD
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(onSubmit)} noValidate>
            <Field name="twentytwo" id="twentytwo" type="number" label="22k" component={renderField} />
            <Field name="eighteen" id="eighteen" type="number" label="18k" autoFocus component={renderField} />
            <Field name="fourteen" id="fourteen" type="number" label="14k" component={renderField} />
            <Field name="nine" id="nine" type="number" label="9k" component={renderField} />
            <Field name="argent" id="argent" type="number" label="Argent" component={renderField} />
            <Field
              name="tournee"
              options={(
                <>
                  {renderOptions}
                </>
            )}
              id="tournee"
              label="Dans la Tournee de"
              component={renderSelect}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="secondary"
              className={classes.submit}
            >
              Ajouter
            </Button>
          </form>
        </div>
        <Box mt={8}>
          <Copyright />
        </Box>
      </Container>
    </Header>

this is my material ui component for redux-form renderSelect这是我用于 redux-form renderSelect 的材质 ui 组件

export const renderSelect = ({
  input, label, meta, id, className, fullWidth, options,
}) => (
  <>
    <FormControl fullWidth error={meta.touched && meta.error} variant="outlined" className={className} required>
      <InputLabel htmlFor={id}>{label}</InputLabel>
      <Select native {...input} id={id} label={label}>
        {options}
      </Select>
      {renderFromHelper(meta.touched, meta.error)}
    </FormControl>
  </>
);

So I resolved it by adding options to state and a run state here is the code所以我通过添加选项来解决它,这里的运行状态是代码

const GoldForm = ({
  change, handleSubmit, weight, addGold, onSubmit, user, isAuthenticated,
}) => {
  const classes = useStyles();
  const [options, setOptions] = React.useState(null);
  const [run, setRun] = React.useState(true);
  useEffect(() => {
    renderOptions();
  }, [user]);

  const renderOptions = () => {
    if (run) {
      const days = [];
      function dateWithMonthsDelay(months) {
        const date = new Date();
        date.setDate(date.getDate() + months);
        return date;
      }
      let i = 0;
      for (let d = new Date(); d <= dateWithMonthsDelay(7); d.setDate(d.getDate() + 1)) {
        if (isAuthenticated && user) {
          const u = user.name.match(/\d/g);
          if (u) {
            const us = user.name.match(/\d/g).join('');
            if (new Date(d).getDay() === 1
            && (us === '25'
            || us === '26'
            || us === '27'
            || us === '3')) {
              days.push(new Date(d));
            } else if (new Date(d).getDay() === 3 && (
              us === '24'
            || us === '28'
            || us === '22'
            || us === '8'
            || us === '9'
            || us === '14'
            )) {
              days.push(new Date(d));
            } else if ((new Date(d).getDay() === 2 || new Date(d).getDay() === 5) && (
              us === '17'
            || us === '21'
            || us === '7'
            || us === '2'
            || us === '4'
            || us === '18'
            || us === '20'
            || us === '23'
            || us === '10'
            || us === '12'
            || us === '16'
            || us === '5'
            || us === '29'
            || us === '30'
            || us === '11'
            || us === '19'
            )) {
              days.push(new Date(d));
            }
          }
        }
      }
      const a = days.map((d, index) => (
        <React.Fragment key={index + 1}>
          {i === 0 ? (<option aria-label="None" value="" />) : null}
          {i += 1}
          <option value={d}>
            {moment(d).format('dddd - Do MMMM YYYY')}
          </option>
        </React.Fragment>
      ));
      setOptions(a);
      setRun(false);
    }
  };

  return (
    <Header>
      <Container component="main" maxWidth="md">
        <div className={classes.paper}>
          <Typography component="h1" variant="h5">
            GOLD
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(onSubmit)} noValidate>
            <Field name="twentytwo" id="twentytwo" type="number" label="22k" component={renderField} />
            <Field name="eighteen" id="eighteen" type="number" label="18k" autoFocus component={renderField} />
            <Field name="fourteen" id="fourteen" type="number" label="14k" component={renderField} />
            <Field name="nine" id="nine" type="number" label="9k" component={renderField} />
            <Field name="argent" id="argent" type="number" label="Argent" component={renderField} />
            <Field
              name="tournee"
              options={options}
              id="tournee"
              label="Dans la Tournee de"
              component={renderSelect}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="secondary"
              className={classes.submit}
            >
              Ajouter
            </Button>
          </form>
        </div>
        <Box mt={8}>
          <Copyright />
        </Box>
      </Container>
    </Header>
  );
};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM