вызов компонента react в цикле на основе функции кнопки onclick, которая устанавливает состояние в true после нажатия кнопки

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я новичок в react, я пытаюсь получить компонент на основе нажатия кнопки if, и как только компонент возвращается в пользовательский интерфейс, я хочу изменить состояние кнопки обратно на исходное (false), поэтому, если я снова нажму на эту кнопку, я должен снова получить новый компонент ниже предыдущего, и это должно продолжаться .., в приведенном ниже коде я могу получить это только один раз.

 const Command = () => {
  const [buttonState, setButtonState] = useState(false);

  const AndOrHandler = () => {
    if (buttonState) {
      return (
        <div>
          <Grid container>
            <SomeComponent />
          </Grid>
        </div>
      );
    }
    return null;
  };


  return (
    <Fragment>
      <FormControl>
        <SomeComponent />
        <AndOrHandler />
        <Button onClick={() => setButtonState(true)} variant="contained" color="primary">Add Condition</Button>
      </FormControl>
    </Fragment>
  );
};

export default Command;

1. Вы просто хотите переключить buttonState значение состояния, чтобы переключить рендеринг AndOrHandler ? Или вы пытаетесь добавлять новые элементы в пользовательский интерфейс при каждом нажатии кнопки? Описание проблемы в этом отношении немного расплывчатое. Каково ваше ожидаемое поведение и постарайтесь быть как можно более ясным и кратким.

2. да, я пытаюсь добавлять новые элементы в пользовательский интерфейс при каждом нажатии кнопки

3. Не могли бы вы обновить свой код с помощью логики цикла? Или это то, что вы хотите, чтобы мы написали для вас? Что вы пробовали?

4. Это та часть, которую я не могу понять, как добавить сюда цикл и отобразить компонент на этом … я пытался с, do while, но не получил удовлетворительных результатов..

5. Да, переключение вашего мышления с императивного на декларативное кодирование является камнем преткновения для многих, включая меня. Пойдите с решением Viet, но я настоятельно рекомендую использовать обновления функционального состояния, когда следующее состояние зависит от текущего состояния. Если вы приобретете эту привычку сейчас, когда вы учитесь, вам будет легче избежать целого класса ошибок в состоянии реакции. Удачи, приятель.

Ответ №1:

Вы хотите продолжить добавление компонента, я предлагаю иметь компоненты состояния:

 const Command = () => {
    const component =  <div>
        <Grid container>
            <SomeComponent />
        </Grid>
    </div>;
    
    const [components, setComponents] = useState([]);

    return (
        <Fragment>
            <FormControl>
                <SomeComponent />
                {components.map(component => component)}
                <Button onClick={() => setComponents([...components, component])} variant="contained" color="primary">Add Condition</Button>
            </FormControl>
        </Fragment>
    );
};

export default Command;

1. не совсем, я хочу функциональность, подобную циклу, при нажатии кнопки я должен получить новый новый компонент ниже предыдущего компонента, ваше предложение просто скроет и покажет мой текущий компонент.

2. Идиоматический способ переключения логического значения состояния реакции — использовать функциональное обновление, т. Е. setButtonState(state => !state) , КСТАТИ.

3. Опять же, идиоматический способ ставить в очередь обновления состояния, которые зависят от существующего состояния, заключается в использовании обновления функционального состояния, setComponents(components => [...components, component]) .