React-Final-Form: Есть ли способ не перерисовывать форму после изменения компонента?

Question

Итак, мне трудно понять это. По сути, у меня есть компонент, не связанный с React Final Form, но внутри тегов Form . Основной подход заключается в том, что когда пользователь нажимает на кнопку (в данном случае зуб), ее значение изменяется и заполняется фиолетовым цветом, чтобы показать, щелкнул ли он - если не заполняет белым. Но когда я заполняю форму и нажимаю на компонент, который имеет зубцы, вся форма перерисовывается. Есть ли способ справиться с таким поведением? Возможно, я ошибаюсь, и это как-то связано с моим пользовательским компонентом.

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

<Form
  initialValues={exam}
  onSubmit={onSubmit}
  render={({ handleSubmit, form, submitting, pristine, values }) => (
    <form onSubmit={handleSubmit}>
     /*Custom component handling the teeth I mentioned*/
     <ConeBeam onClick={toothClicked} color="white" data={teeth} />
     /*TextField related to React-Final-Form using mui-rff*/
     <TextField
        label="Region"
        name="clark_region"
        size="small"
        fullWidth
     />
    </form>
  )}
/>

/*toothClicked function*/
function toothClicked({ id }) {

const tooth = parseInt(id);
const el = document.getElementById(id);

if (!teeth.includes(tooth)) {
  setTeeth([...teeth, tooth]);
  el.setAttribute("class", classes.primary);
} else {
  teeth.splice(teeth.indexOf(tooth), 1);
  setTeeth([...teeth]);
  el.setAttribute("class", classes.white);
}

}

РЕШЕНО! Я использовал useState, который выполняет рендеринг для изменения своего состояния. Просто изменил setTeeth на простую переменную, используя let.

Answer 1

Похоже, вам нужно использовать React.useCallabck() для ваших обратных вызовов, особенно onSubmit, который является опорой для Form, поэтому при каждом повторном рендеринге родительский элемент onSubmit получает новую ссылку на функцию, которая вызывает повторный рендеринг формы.

const Parent = () => {
   const onSubmit = React.useCallback(() => {
       // do your submit logic here
   });
   return (
     <Form onSubmit={onSubmit} ... />
   );
}

Answer 2

Форма будет перерисована, поскольку именно так работает React - если вы измените состояние или реквизиты для компонента, компонент будет перерисован. Попробуйте переместить компонент ConeBeam в родительский объект, если повторное отображение является проблемой для вашего приложения.