Question

我有一个表单，可以从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
            )
        )
)
))

Answer 1

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

反应渲染器内部的映射组件。如何不使其在每次重新渲染时都重新映射？

1 个答案: