时间戳

首页 > 解决方案 > React Native - 动态创建新组件 onPress

javascript - React Native - 动态创建新组件 onPress

问题描述

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

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...]。但是当我按下按钮时出现以下错误 - “未定义不是函数”。

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

标签： javascriptarraysreactjsreact-native

解决方案

问题：推（）

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

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

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

解决方案：concat() 或 spread

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

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

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

推荐阅读