Добавить поле ввода onClick компонент без учета состояния React Electron

Question

Я новичок в электронике и работаю над тем, чтобы объединить React / Typescript с помощью Hooks и ApplicationContext. Я не создавал фреймворк, и мне нужно узнать, как заставить это работать. Просто установите контекст, чтобы избежать подобных ответов, используйте вместо этого Redux. :)

У меня есть компонент без сохранения состояния, который является формой. Это должно быть без сохранения состояния, поэтому у меня есть доступ к значениям, которые хранятся в ApplicationContext. Я пытаюсь визуализировать дополнительные поля ввода при нажатии кнопки, и до сих пор, когда я нажимаю кнопку, Electron вызывает метод, а затем повторно выполняет рендеринг. Я искал высоко и низко, и несколько часов бился об это. Я заранее прошу прощения, если уже есть ответ.

Пока код, который отображает кнопку, выглядит так:

<div className="form-group">
    <button onClick={() => addUrls()}>
        Add a URL
    </button>
</div>

А метод просто выводит на консоль в момент Выглядит это так:

const addUrls = () => {
    console.log('clicked')
}

оператор print попадает в консоль, а затем Electron повторно выполняет рендеринг. Остальные методы компонента вызываются и ведут себя предсказуемо. Я действительно не понимаю, почему именно это действие вызывает рендеринг. Если кто-то может указать мне направление ответа или указать, где я делаю что-то глупое в своем коде, я был бы очень признателен.

Answer 1

Оказывается, я делал что-то глупое. Поскольку моя кнопка находится внутри формы, а я не указал тип кнопки, она выполняла поведение по умолчанию «submit», которое вызывает рендеринг с помощью onClick.

Решением было добавить type = "button" к кнопке, и теперь она решена.

    <div className="form-group">
        <button onClick={addUrls} type="button">
            Add a Reference URL
        </button>
    </div>

Надеюсь, это может кого-то сэкономить, если в будущем они столкнутся с этой проблемой. .

Answer 2

Попробуйте заменить onClick={() => addUrls()} на onClick={addUrls}. Первый метод создаст новую ссылку на каждый рендер, что может вызвать рендеринг.