React Native - 动态创建新组件 onPress

Question

每次用户单击按钮时，我都希望动态创建一个新组件。

 export default function WorkoutCard({ children }) { const [workoutNum, setWorkoutNum] = useState([1]); const addSets = () => { setWorkoutNum(workoutNum.push(workoutNum.length + 1)); }; return ( <View style={styles.card}> <AppText style={styles.exerciseHeader}>{children}</AppText> {workoutNum.map((num) => ( <WorkoutTextInput workoutNum={num} /> ))} <Divider></Divider> <Button title="Add set" style={styles.add} onPress={addSets} /> </View> ); }

基本上，我正在尝试创建一个数组，当用户单击按钮时，该数组也将具有以下值 [1,2,3,4...]。 但是当我按下按钮时出现以下错误 - “未定义不是函数”。

请问有什么提示可以解决这个问题吗？

Answer 1

问题：推（）

问题是方法Array.push() 。 该方法改变数组并返回新数组的长度。 它不返回数组本身。

setWorkoutNum(workoutNum.push(workoutNum.length + 1));

当您调用它时，您正在将 state 从array [1]更改为number 2 。

解决方案：concat() 或 spread

您需要将 state 设置为新阵列。 您可以使用扩展符号[...state, newVal]或使用Array.concat()来做到这一点。 concat 方法创建一个新数组并且不会改变现有数组。

setWorkoutNum(workoutNum.concat(workoutNum.length + 1));

setWorkoutNum([...workoutNum, workoutNum.length + 1]);