如何将数据库表中两列的多个值组合填入<datalist>的value属性？

你的代码主要有两个问题：

1. courseName 定义在函数外层时，course 变量还未存在（它是 map 循环里的迭代项），无法访问 course.name 和 course.level；
2. 普通 JS 代码里错误使用了 JSX 的插值语法 {course.name}，纯 JS 环境下不需要包裹大括号。

下面是修正后的代码，提供两种实现方式：

方式一：直接在 option 中拼接值 #

function AttendCourseSelect({courses}) {
    return (
        <div className="col-sm col-md col-lg">
            <label htmlFor="CourseName">Course: </label>
            {/* 给input添加id，和label的htmlFor对应，增强可访问性 */}
            <input type="text" list="courses" id="CourseName"/>
            <datalist id="courses">
                {courses.map((course) => (
                    {/* 添加key属性，符合React列表渲染要求，避免警告 */}
                    <option key={course.id} value={`${course.name}-${course.level}`} />
                ))}
            </datalist>
        </div>
    )
}

export default AttendCourseSelect;

方式二：在循环内部定义组合变量 #

function AttendCourseSelect({courses}) {
    return (
        <div className="col-sm col-md col-lg">
            <label htmlFor="CourseName">Course: </label>
            <input type="text" list="courses" id="CourseName"/>
            <datalist id="courses">
                {courses.map((course) => {
                    // 在循环内部定义courseName，此时可以正常访问当前迭代的course对象
                    const courseName = `${course.name}-${course.level}`;
                    return <option key={course.id} value={courseName} />;
                })}
            </datalist>
        </div>
    )
}

export default AttendCourseSelect;

关键说明 #

• 使用 ES6 模板字符串 `${course.name}-${course.level}` 来拼接值，语法更简洁清晰；
• 列表渲染时必须给每个 option 添加唯一的 key 属性，通常使用数据的唯一标识（如 course.id）；
• 给 input 添加 id 属性，与 label 的 htmlFor 对应，提升页面的可访问性。

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