Javascript 停止重新渲染父组件。仅重新渲染子组件

我有一个React Select字段，在Formik字段中，当您从下拉选项中选择一个项目时，所有父组件都将重新呈现。这是容器中可用的最深的子组件

它重新呈现了4个父母。这有点问题。我想将组件的重新加载限制为仅自身

The above happens because each Child Process passes
props to the Container, which is the master form.
And onSubmit it takes all the info(props) and makes the API Call.

我试着用

shouldComponentUpdate

来做，但是运气不好。我试着用

SetState

来做这件事，但那件事还是泡汤了，因为我无法让它工作（出现了大量错误）

--TLDR-- 问题是： 使组件仅保留对其自身的渲染。it中使用的外部组件

Formik

和

React Select

以下是代码：

            <div className="w-50">
              <Field
                name={`${keyField}.${index}.permissions`}
                render={({ field: { value, name }, form: { setFieldValue, setFieldTouched } }) => (
                  <div>
                    <label htmlFor="namespace-permissions" className="font-weight-medium">
                      Permissions in Namespace <Asterisk />
                    </label>
                    <Select
                      isMulti
                      closeMenuOnSelect={false}
                      id="namespace-permissions"
                      defaultValue={convertNamespaceToDefaultValue(
                        dependencies.namespacePermissions,
                        value
                      )}
                      options={convertNamespaceToSelect(dependencies.namespacePermissions)}
                      onChangeCallback={values => {
                        setFieldValue(name, convertSelectToNamespacesData(values));
                        setFieldTouched(name, true);
                      }}
                    />
                    <ErrorMessage name={name} component={FormErrorMessage} />
                  </div>
                )}
              />
            </div>

(
命名空间中的权限
{
setFieldValue（名称，ConvertSelecttonNamespacesData（值））；
setFieldTouched（名称，true）；
}}
/>
)}
/>

dependacies

prop是使树向上跳到主窗体Props的工具，并重新渲染整个组件树。这也与我昨天提出的另一个问题有关，关于react-select的

closeMenuOnSelect={false}

工作不正常

---

^这就是为什么会发生这种情况的原因。谢谢你。

我不知道你如何才能用你正在使用的库做到这一点。但是，当我不想不必要地渲染组件时，我会使用

React.memo

来比较

道具

对象，并决定是否需要更新

无反应备忘录

函数应用程序（）{
返回(
);
}
功能家长1（道具）{
log（'Rendering Parent1…'）；
const[parentState，setParentState]=React.useState（true）；
返回(
);
}
功能父母2（道具）{
log（'Rendering Parent2…'）；
返回(
);
}
功能儿童（道具）{
log（'Rendering Child…'）；
返回(
props.setParentState（（prevState）=>！prevState）}>更新ParentState
);
}
ReactDOM.render（，document.getElementById（'root'））
我会检查是否正在调用Formik的onSubmit，以及是否触发树重新渲染。如果您有一个按钮带有
type=button
，可能会触发表单提交

Formik v2之前的版本也有一个bug，如果通过
render
或
组件
prop提供渲染功能，则字段将在每次更新时装载和卸载其所有子项。相反，只需将render函数作为Fields子项传递。
不幸的是，我无法提供所有4个父组件代码，因为找到要粘贴的相关部分需要花费大量时间。CodeSandbox示例也是如此。对不起，如果我不帮忙，我只是问，因为我认为可能有一个快速的解决方案。这里很难给你一个具体的答案，但我知道如何实现这一点的唯一方法是使用shouldComponentUpdate。这就是在React中处理组件呈现的方法。尝试过它，但它似乎没有将其封装在组件本身中，据我所知，它不应该这样做。无论如何，谢谢您的时间..每次您的表单发生变化时，Formik都会更新表单模型，很明显，每次击键都会更新表单模型。将传递一个新对象，该对象强制组件重新渲染。您可以考虑在Fielik中使用一个名为“代码> FastField < /Cord>”的字段，但是您必须小心使用HTERE，因为如果字段名值改变，它只会更新。值是包括整个对象的实际值。如果它一直指向同一个对象，而您依赖其中的值，那么它将不会更新。谢谢您的时间。我将查看
React.memo
。但我认为问题在于formik，因为即使
shouldComponentUpdate
实现正确。Formik的字段仍然会重新渲染整个表单。在我的例子中，有5个（我的组件有3个兄弟姐妹-1个父母）。我可能错了，但由于所有内容都包装在一个Formik
表单中，因此每次发生变化时，它都会重新呈现所有内容。无论如何，非常感谢你。。