React Native Flatlist Debugging

Question

对于我的应用程序，我需要一个"组件，该组件呈现动态数量的输入字段，每个字段表示菜谱中的步骤。默认情况下只有一步，但可以通过按下"add&quot键来添加更多步骤。按钮。我想使用FlatList将步骤呈现为RecipeStep组件，但我在devtools调试器中得到以下错误:

try {
// This should throw.
if (construct) {
// Something should be setting the props in the constructor.
var Fake = function Fake() {
throw Error();
}; // $FlowFixMe

我找不到问题。

下面是我的adrecipe组件的代码:

import React, {useState} from 'react'
import {StyleSheet, View, Text, TextInput,FlatList, Button, ScrollView, InputAccessoryView} 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}]);
var stepNumber = 1;
const addHandler = ()=>{
const _steps = [...steps];
_steps.push({key: stepNumber, value: '', duration:''});
setSteps(_steps); 
stepNumber += 1;
}

return(
<View>
<Text>Add a recipe here!</Text>
<Text>{steps[0].key}</Text>
<ScrollView>
<FlatList
data={steps}
renderItem={ ({ item }) => (
<RecipeStep item={item}/>
)}
/>
</ScrollView>
<Button title="Add" onPress={addHandler} />
</View>
)
}

我松散地基于这个教程的代码，当我运行它时，它实际上作为它自己的项目工作:https://www.youtube.com/watch?v=LH_SoXiu_Hk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=11

我知道RecipeStep组件不是问题，因为当我用组件替换它时，我得到了相同的错误。

Answer 1

你是在给一个常量添加对象，替换const _steps =[…steps];与let _steps =[…steps];