Javascript 在渲染内部反应贴图组件。如何避免每次重新渲染都重新映射？

我有一个从json文件映射其组件的表单。我的问题是，当它重新启动时，它会再次加载所有内容，从而使系统滞后

下面是json文件的结构

在我的

render（）

中有一个映射循环，使它们成为组件。我的问题是，每次它重新渲染时，它都会重新映射，所以键入内容太慢

实现这一点的更好方法是什么

const headers = [
    { header: "Basic Information", table: "basic" },
    { header: "Work Information", table: "work" }
];

const divisions = {
    basic: [{ header: "", name: "main" }],
    work: [{ header: "", name: "main" }]
};

const fields = {
    basic: {
        main: [
            {
                labelText: "Last Name",
                name: "lname",
                type: "text",
                shown: {
                    1: true,
                    2: true
                },
                md: 3
            },
        ]
    }
}

这是我用来在渲染中映射文件以生成组件的代码片段

headers.map((header, key) => (
    divisions[header.table].map(division => (
            fields[header.table][division.name].map((field, key) => (
                    field.type == "text" ||
                    field.type == "number" ||
                    field.type == "email" ? (
                        <CustomInput
                            labelText={field.labelText}
                            id={field.name}
                            formControlProps={{
                                fullWidth: true
                            }}
                            errorText={
                                errors[field.name]
                                    ? errors[field.name]
                                    : null
                            }
                            success={
                                successes[field.name]
                                    ? successes[field.name]
                                    : null
                            }
                            helperText={
                                field.helperText
                                    ? field.helperText
                                    : null
                            }
                            inputProps={{
                                name: field.name,
                                type: field.type,
                                value: this.state[
                                    field.name
                                ]
                                    ? this.state[field.name]
                                    : "",
                                disabled: readOnly,
                                onChange: this.handleChange,
                                inputProps: {
                                    ...field.inputProps
                                }
                            }}
                        />
                    ) : null
            )
        )
)
))

headers.map（（头，键）=>(
分区[header.table].map（分区=>(
字段[header.table][division.name].map（（字段，键）=>(
field.type==“文本”||
field.type==“编号”||
field.type==“电子邮件”(
)：null
)
)
)
))

能否将映射版本保存在状态中，并且仅当状态对象为null/未定义时才进行映射？

是否一直在更改JSON文件，这就是为什么所有内容都一直在重新呈现？请发布。组件内部发生的情况未知。@cloud\u traveler我更改状态中的值。然后重新呈现