React-Final-Form：有没有办法在组件更改后不重新渲染表单？答案

【问题标题】：React-Final-Form: Is there a way to not re-render form after component change?React-Final-Form：有没有办法在组件更改后不重新渲染表单？
【发布时间】：2020-04-01 14:34:10
【问题描述】：

所以，我很难弄清楚这一点。基本上我有一个与 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 重新渲染以更改其状态。只需使用 let 将 setTeeth 更改为一个简单的变量。

【问题讨论】：

给我们看toothClicked函数？
嗨@ZohaibIjaz 刚刚更新了问题正文！我的坏:)

标签： reactjs react-final-form final-form

【解决方案1】：

您可以使用表单属性 initialValuesEqual。例如：initialValuesEqual={() => true}

【讨论】：

这是解决我问题的唯一答案。

【解决方案2】：

表单会重新渲染，因为 React 就是这样工作的——如果你改变了一个组件的状态或者 props，这个组件就会重新渲染。如果重新呈现对您的应用程序来说是个问题，请考虑将 ConeBeam 组件移动到父组件中。

【讨论】：

我也有同样的想法，会试试的。谢谢你:)

【解决方案3】：

您似乎需要使用React.useCallabck() 进行回调，尤其是onSubmit，它是Form 的一个道具，所以在每个父级重新渲染时，您的onSubmit 会获得一个新的函数引用，这会导致重新渲染形式。

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

【讨论】：

嗯，问题是在将表单值发送给父组件（提交）之前，整个渲染内容都发生在子组件上。