React Native FlatList渲染动态RecipeStep组件报错排查求助

你的报错主要来自两个核心问题：

• FlatList嵌套在ScrollView中，React Native中这两个组件的滚动逻辑会冲突，导致渲染异常
• 用var声明的stepNumber会在组件每次重新渲染时被重置，无法正确生成唯一的key值

1. 移除ScrollView对FlatList的包裹 #

FlatList本身内置了滚动容器，不需要额外用ScrollView包裹，嵌套会触发布局和渲染冲突，这是你当前报错的主要原因。

2. 用useState维护stepNumber #

var声明的变量在函数组件每次渲染时都会重新初始化，导致新增步骤的key值可能重复或逻辑混乱，改用useState来维护这个计数器：

const [stepNumber, setStepNumber] = useState(1);

3. 统一步骤对象的字段 #

初始步骤对象用的是description，但新增时用的是value，字段不统一会导致后续组件取值异常，保持字段一致。

修改后的完整代码 #

import React, { useState } from 'react'
import { StyleSheet, View, Text, FlatList, Button } from 'react-native'
import RecipeStep from '../components/recipeStep.js';
import { auth } from '../firebase.js'

export default function AddRecipe({ navigation }) {
    const [steps, setSteps] = useState([{ description: '', duration: '', key: 0 }]);
    const [stepNumber, setStepNumber] = useState(1);

    const addHandler = () => {
        const _steps = [...steps];
        // 保持字段和初始一致：description而非value
        _steps.push({ key: stepNumber, description: '', duration: '' });
        setSteps(_steps);
        setStepNumber(prev => prev + 1);
    }

    return (
        <View style={styles.container}>
            <Text>Add a recipe here!</Text>
            <Text>{steps[0].key}</Text>
            {/* 移除外层ScrollView，直接用FlatList */}
            <FlatList
                data={steps}
                renderItem={({ item }) => (
                    <RecipeStep item={item} />
                )}
                style={styles.flatList}
            />
            <Button title="Add" onPress={addHandler} />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16
    },
    flatList: {
        flex: 1,
        marginVertical: 16
    }
});

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