Итак, моя проблема в том, что я динамически отрисовываю параметры, когда я нажимаю на «Выбрать» или «Параметры», компонент повторно отрисовывает и изменяет параметры, поэтому мне нужно нажать два раза, чтобы выбрать опцию в «Выбрать». Это повторный рендеринг, потому что он повторно запускает функцию, должен ли я просто сохранить значение true/false в react hook и изменить его при первом запуске, чтобы он не запускал функцию повторно?

Вот мой код

Это функция, которая создает функцию отображения параметров

 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 amp;amp; user) {
        const u = user.name.match(/d/g);
        if (u) {
          const us = user.name.match(/d/g).join('');
          if (new Date(d).getDay() === 1
          amp;amp; (us === '25'
          || us === '26'
          || us === '27'
          || us === '3')) {
            days.push(new Date(d));
          } else if (new Date(d).getDay() === 3 amp;amp; (
            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) amp;amp; (
            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>
      </>
    ));
  };
 

Это возврат из компонента формы

 <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>
 

это мой компонент пользовательского интерфейса материалов для
выбора рендеринга с измененной формой

 export const renderSelect = ({
  input, label, meta, id, className, fullWidth, options,
}) => (
  <>
    <FormControl fullWidth error={meta.touched amp;amp; 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>
  </>
);

 

Поэтому я решил эту проблему, добавив параметры в состояние и состояние выполнения вот код

 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 amp;amp; user) {
          const u = user.name.match(/d/g);
          if (u) {
            const us = user.name.match(/d/g).join('');
            if (new Date(d).getDay() === 1
            amp;amp; (us === '25'
            || us === '26'
            || us === '27'
            || us === '3')) {
              days.push(new Date(d));
            } else if (new Date(d).getDay() === 3 amp;amp; (
              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) amp;amp; (
              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>
  );
};