如何在React的.map()中将字符串式属性路径转为动态值？

你的问题核心是把字符串形式的属性路径（比如'movie?.title'）转换成对movie对象的实际属性访问，下面是几种可行的方案：

方案一：修改数组存储结构（推荐） #

直接在formInputItems里存属性名而非完整路径字符串，这样在组件里可以直接动态访问movie的属性：

修改string.js：

export const formInputItems = [
    {
        label: 'title',
        defaultValue: 'title', // 仅保留属性名
    },
    {
        label: 'plot',
        defaultValue: 'plot',
    },
]

然后在CardForm组件里修改映射逻辑：

{formInputItems.map(({ label, defaultValue }, index) =>
    isEditing && (
        <EditInput
            key={index}
            htmlFor={label}
            id={label}
            defaultValue={movie?.[defaultValue]} // 动态访问movie的对应属性
            onChange={(e: any) => onChangeHandler(e, label)}>
            {label}
        </EditInput>
    ) 
)}

这种方式最安全、可读性最高，适合当前你的属性层级场景。

方案二：解析字符串路径（无需修改原数组） #

如果不能改动formInputItems的结构，可以解析字符串里的属性路径，提取出需要访问的属性名：

简单场景（仅一级属性） #

直接替换掉'movie?.'前缀：

{formInputItems.map(({ label, defaultValue }, index) =>
    isEditing && (
        <EditInput
            key={index}
            htmlFor={label}
            id={label}
            defaultValue={movie?.[defaultValue.replace('movie?.', '')]}
            onChange={(e: any) => onChangeHandler(e, label)}>
            {label}
        </EditInput>
    ) 
)}

嵌套属性场景（比如'movie?.director?.name'） #

可以写一个工具函数来深层访问对象：

// 工具函数：根据路径字符串获取对象嵌套属性
const getNestedValue = (obj: any, path: string) => {
    // 先去掉前缀，再按.分割路径
    const keys = path.replace('movie?.', '').split('.');
    // 逐层访问对象属性
    return keys.reduce((currentObj, key) => currentObj?.[key], obj);
};

然后在映射时使用：

{formInputItems.map(({ label, defaultValue }, index) =>
    isEditing && (
        <EditInput
            key={index}
            htmlFor={label}
            id={label}
            defaultValue={getNestedValue(movie, defaultValue)}
            onChange={(e: any) => onChangeHandler(e, label)}>
            {label}
        </EditInput>
    ) 
)}

方案三：不推荐使用eval #

虽然eval(defaultValue)可以直接执行字符串代码拿到值，但eval存在安全风险（若字符串包含恶意代码），且代码可读性差，除非特殊情况，不建议使用。

内容的提问来源于stack exchange，提问作者evll