React中基于数组exercise_sets值动态生成TextInput字段问题

DevOps 小满

2026-7-25

解决方法

你可以在遍历exercises的map回调里，再生成一个对应长度的数组来创建指定数量的TextInput。核心逻辑是用Array()构造出对应长度的数组，再通过map遍历这个数组生成输入框。

完整代码示例

return (
    <ScrollView>
        {exercises.map((item, exerciseIndex) => (
            <div key={exerciseIndex}>
                <Text>{item.exercise_title}</Text>
                {/* 根据exercise_sets的数值生成对应数量的输入框 */}
                {Array(item.exercise_sets).fill(null).map((_, setIndex) => (
                    <TextInput
                        key={`${exerciseIndex}-${setIndex}`}
                        name={`Reps-${item.exercise_title}-${exerciseIndex}-${setIndex}`}
                        placeholder={`Set ${setIndex + 1}`}
                        mode="flat"
                        autoCapitalize="none"
                        style={Styles.AuthInput}
                    />
                ))}
            </div>
        ))}
    </ScrollView>
);

关键细节说明

生成指定长度数组：Array(item.exercise_sets)会创建一个长度等于exercise_sets的空数组，fill(null)是为了让数组每个位置有可迭代的元素（空数组无法直接执行map）。
设置唯一key：React要求列表元素必须有唯一key，这里用${exerciseIndex}-${setIndex}组合确保每个输入框的key不重复，避免渲染警告。
修正模板字符串：你原来写的{i}是错误写法，模板字符串里的变量要写成${变量名}格式，这里结合外层的exerciseIndex和当前的setIndex，保证每个输入框的name唯一，方便后续处理表单数据。
占位符优化：把占位符改成Set ${setIndex + 1}（比如Set 1、Set 2）会比直接显示数字更直观，你也可以根据需求改回原来的item.exercise_sets。