javascript - 在渲染中 react 映射组件。如何不让它在每次重新渲染时都重新映射？

Question

我有一个从 json 文件映射其组件的表单。我的问题是，当它重新呈现时，它会再次加载所有内容，从而使系统变得迟钝。

下面是json文件的结构。

我的 render() 中有一个 map 循环来使它们成为组件。我的问题是每次重新渲染时它都会再次重新映射，所以打字太慢了。

什么是更好的实现方式？

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
            )
        )
)
))

Answer 1

您能否将映射版本保存在状态中，并且仅在该状态对象为 null/undefined 时才进行映射？