React map和基于Array值的动态Inputfields

Question

我是React/JS/JSX编程的新手，最近几天在map()上挣扎

我想根据"exercise_sets"的值在Fields上创建一个金额数组

exercises-Array:

{"id":1,"title":"Push Volume","exercises":[{"exercise_id":1,"exercise_sets":3},{"exercise_id":2,"exercise_sets":2}],"total_exercises":2]

我已经可以遍历" exercises "用地图()

return (
<ScrollView>

{map(exercises, (item, i) => (

<Text>{item.exercise_title}</Text>
))}
</ScrollView>
);

现在我想在地图(->第一次练习的练习集= 3

<TextInput name={`Reps-${item.exercise_title}-{i}`} placeholder={item.exercise_sets} mode="flat" autoCapitalize="none" style={Styles.AuthInput} /> 

尝试了很多事情都没有成功，希望有人能给我一点提示…

Answer 1

为了动态地生成TextInputs，你必须在第一个map中创建一个for循环。

就像这样。

return (
<ScrollView>
{exercises.map((exercise, index) => (
<View key={exercise.id}>
<Text>{exercise.title}</Text>
{Array.from({ length: exercise.exercise_sets }).map((_, setIndex) => (
<TextInput
key={`Reps-${exercise.title}-${setIndex}`}
name={`Reps-${exercise.title}-${setIndex}`}
placeholder={`Set ${setIndex + 1}`}
mode="flat"
autoCapitalize="none"
style={Styles.AuthInput}
/>
))}
</View>
))}
</ScrollView>
);