javascript - 如何使用 textinput 将多个项目添加到平面列表?
问题描述
我正在尝试通过文本输入将项目添加到平面列表。目前我只能添加一个项目,当我尝试添加第二个项目时,它只会更新第一个项目,尽管来自 textinput 的数据应该出现在前一个 textinput 的下方。我发现了一些类似问题的实例,我知道我可能需要在我的代码中添加一些东西,但我就是不知道是什么。下面是我的代码。我将不胜感激任何帮助:)
function FlatlistComponent({ }) {
const listItems = [];
const [arrayHolder, setArrayHolder] = React.useState([]);
const [textInputHolder, setTextInputHolder] = React.useState('');
useEffect(() => {
setArrayHolder(listItems)
}, [])
const joinData = () => {
listItems.push({ name : textInputHolder });
setArrayHolder(listItems);
}
const FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "95%",
backgroundColor: '#00678A',
alignSelf: 'center'
}} />
);
}
// Delete note
deleteNote = id => () => {
const filteredData = arrayHolder.filter(item => item.id !== id);
setArrayHolder({ data: filteredData });
}
return (
<View style={styles.MainContainer}>
<FlatList
data={arrayHolder}
width='100%'
extraData={arrayHolder}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={({ item }) => <Text style={styles.item} onPress={deleteNote(item.id)}> {item.name} </Text>}
/>
<TextInput
placeholder='Kirjoita uusi'
onChangeText={data => setTextInputHolder(data)}
style={styles.textInputStyle}
underlineColorAndroid='transparent'
clearTextOnFocus={true}
value={listItems}
/>
<TouchableOpacity onPress={joinData} style={styles.button} >
<Text style={styles.buttonText}> + </Text>
</TouchableOpacity>
</View>
);
}
解决方案
listItems
组件重新渲染后始终是一个空数组,您应该将以前的 arrayHolder 与新项目连接起来:
const joinData = () => {
setArrayHolder([... arrayHolder, {name: textInputHolder }]);
// or use update function
// setArrayHolder(prev => [...prev, {name: textInputHolder }]);
}
推荐阅读
- elasticsearch - 在 Elasticsearch 中使用具有模糊性的 Span 查询进行多字段搜索
- angular - JS/Angular - ngIf 与从端点返回的地图
- sql - 从重叠的日期范围中获取不同的连续日期范围
- ios - 带有动态控件的 UITableView - 垂直和水平
- javascript - javascript - 浏览器历史操作
- python - 为什么这个 python 代码不能在 sqlite3 中创建临时表?
- sql - 如何使用“where”子句转义 SQLite 查询中的下划线
- bash - awk 返回时转义 & 符号
- ios - 在 iOS 12 版全纵向应用程序中以横向播放 AVKit 全屏视频
- arduino - “StaticJsonBuffer”未在此范围内声明