Reactjs 我一直在犯这个错误。TypeError:附加项不是函数。（在'；附加项（文本）'；中，'；附加项'；是对象的实例）
这是我每次尝试向列表中添加内容时都会遇到的错误 TypeError:附加项不是函数。（在“addItems（text）”中，“addItems”是Object的实例） 我不知道我做错了什么。我是新来的，所以任何帮助都将不胜感激 这是我的App.jsReactjs 我一直在犯这个错误。TypeError:附加项不是函数。（在'；附加项（文本）'；中，'；附加项'；是对象的实例）,reactjs,react-native,Reactjs,React Native,这是我每次尝试向列表中添加内容时都会遇到的错误 TypeError:附加项不是函数。（在“addItems（text）”中，“addItems”是Object的实例） 我不知道我做错了什么。我是新来的，所以任何帮助都将不胜感激 这是我的App.js import React, { useState } from 'react'; import { View, Text, StyleSheet, ImageBackground, FlatList } from 'react-native'; im
import React, { useState } from 'react';
import { View, Text, StyleSheet, ImageBackground, FlatList } from 'react-native';
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';
import { uuid } from 'uuidv4';
import Header from './Componets/Header';
import AddItem from './Componets/AddItem';
import background from './Images/sunrise-in-the-smoky-mountains.jpg';
import ListItem from './Componets/ListItem';
const App = () => {
const [item, setItems] = useState([
// {
// id: uuidv4(),
// name: ''
// },
{
id: uuidv4(),
name: "gym"
},
{
id: uuidv4(),
name: "study"
}
]);
const addItems = (text) => {
setItems(prevItems => {
return [{ id: uuidv4(), text }, ...prevItems]
})
}
const deleteItem = (id) => {
setItems(prevVal => {
return prevVal.filter(item => item.id != id)
})
}
return (
<View style={styles.container}>
<ImageBackground source={background} style={styles.image}>
<Header
title="Gotta get this done!" />
<AddItem
addItem={addItems}
/>
<FlatList
data={item}
renderItem={({ item }) => (
<ListItem item={item.name} deleteItem={deleteItem} />
)}
/>
</ImageBackground>
</View>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
}
})
export default App;
import React，{useState}来自“React”；
从“react native”导入{View，Text，StyleSheet，ImageBackground，FlatList}；
导入“获取随机值”；
从“uuid”导入{v4作为uuidv4}；
从“uuidv4”导入{uuid}；
从“./Componets/Header”导入标头；
从“./Componets/AddItem”导入附加项；
从“/Images/sunrise in the smoky mountains.jpg”导入背景；
从“./Componets/ListItem”导入ListItem；
常量应用=（）=>{
const[item，setItems]=useState([
// {
//id:uuidv4（），
//名称：“”
// },
{
id:uuidv4（），
名称：“健身房”
},
{
id:uuidv4（），
名称：“研究”
}
]);
常量附加项=（文本）=>{
setItems（PreviItems=>{
返回[{id:uuidv4（），text}，…previitems]
})
}
常量deleteItem=（id）=>{
setItems（prevVal=>{
返回prevVal.filter（item=>item.id！=id）
})
}
返回(
(
)}
/>
)
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
图片：{
弹性：1，
resizeMode：“封面”，
为内容辩护：“中心”
}
})
导出默认应用程序；
import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Button } from 'react-native';
const AddItem = ( addItems ) => {
const [text, setText] = useState("");
const onChange = (inputVal) => setText(inputVal);
return (
<View style={styles.addItemView}>
<TextInput
style={styles.inputText}
placeholder="Add item to list..."
onChangeText={onChange}
/>
<TouchableOpacity style={styles.button}>
<Button title="Add Item" onPress={() => addItems(text)} />
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
addItemView: {
flex: 1,
flexDirection: "row",
alignItems: 'center'
},
inputText: {
fontSize: 20,
backgroundColor: "white",
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
width: 250,
},
button: {
alignItems: "center",
justifyContent: "center",
height: 40,
backgroundColor: "#bbc7ad",
borderRadius: 10,
borderWidth: 2,
borderColor: "#99a191",
marginLeft: 20,
}
})
export default AddItem;
import React，{useState}来自“React”；
从“react native”导入{View，Text，StyleSheet，TextInput，TouchableOpacity，Button}；
常量附加项=（附加项）=>{
const[text，setText]=useState（“”）；
const onChange=（inputVal）=>setText（inputVal）；
返回(
附加项（文本）}/>
);
};
const styles=StyleSheet.create({
addItemView：{
弹性：1，
flexDirection:“行”，
对齐项目：“中心”
},
输入文本：{
尺寸：20，
背景颜色：“白色”，
对齐项目：“居中”，
为内容辩护：“中心”，
边框宽度：1，
宽度：250，
},
按钮：{
对齐项目：“中心”，
辩护内容：“中心”，
身高：40，
背景颜色：“bbc7ad”，
边界半径：10，
边界宽度：2，
边框颜色：#99a191“，
marginLeft:20，
}
})
导出默认附加项；
<AddItem
addItem={addItems}
/>
const AddItem = ( props ) => {
// We are extracting addItem function from props
const {addItem} = props
const [text, setText] = useState("");
const onChange = (inputVal) => setText(inputVal);
return (
<View style={styles.addItemView}>
<TextInput
style={styles.inputText}
placeholder="Add item to list..."
onChangeText={onChange}
/>
<TouchableOpacity style={styles.button}>
<Button title="Add Item" onPress={() => addItem(text)} />
</TouchableOpacity>
</View>
);
};
const AddItem=（道具）=>{
//我们正在从props中提取addItem函数
常量{addItem}=props
const[text，setText]=useState（“”）；
const onChange=（inputVal）=>setText（inputVal）；
返回(
附加项（文本）}/>
);
};
const AddItem = ({addItem} ) => {
.....
return (
<View style={styles.addItemView}>
......
<TouchableOpacity style={styles.button}>
<Button title="Add Item" onPress={() => addItem(text)} />
</TouchableOpacity>
</View>
);
};
const AddItem=（{AddItem}）=>{
.....
返回(
......
附加项（文本）}/>
);
};
const AddItem = (props) => {
const [text, setText] = useState("");
const onChange = inputVal => setText(inputVal);
return (
<View style={styles.addItemView}>
<TextInput
style={styles.inputText}
placeholder="Add item to list..."
onChangeText={onChange}
/>
<TouchableOpacity style={styles.button}>
<Button title="Add Item" onPress={() => props.addItem(text)} />
</TouchableOpacity>
</View>
);
};
const AddItem=（道具）=>{
const[text，setText]=useState（“”）；
const onChange=inputVal=>setText（inputVal）；
返回(
props.addItem（文本）}/>
);
};