javascript - 我需要帮助修复列表数组中的错误
问题描述
我编码社区我的搜索栏中有一个错误。该应用程序非常简单......每当用户创建一个名称时,它都会显示在列表数组中。我的问题是,当用户创建一个名称时,该名称没有显示我的列表,但是当我搜索该名称时,它确实显示了列表。
这里的视频让您可以更好地理解 https://www.youtube.com/watch?v=WIM-H4xXqMw
和代码。我在搜索栏中需要帮助并在单击按钮时显示列表
FolderHome.js - component
const [folder, emptyFolder] = useState([]);
const data = folder;
const [searchTerm, setSearchTerm] = useState("");
let [filteredData, setFilteredData] = useState(data);
//this function is when the user press the button we want to use the folderName(value) and display in a list.
//then when we add a foldername we update and add a new folder name.
//To understand I am just adding a folder name into my empty array. Now my array as a Folder inside.
const addFolder = (folderName) => {
emptyFolder((currentFolder) => [
...currentFolder,
{ id: Math.random().toString(), value: folderName },
]);
};
//Search
const _searchFilterFunction = (event, data) => {
let newData = [];
setSearchTerm({ searchTerm: event });
if (event) {
newData = data.filter((item) => {
const textData = event.toUpperCase();
const nameFolder = item.value.toUpperCase();
return nameFolder.includes(textData);
});
setFilteredData([...newData]);
} else {
setFilteredData([...data]);
}
};
return (
<View style={styles.HomeContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="none"
placeholderTextColor="#9a73ef"
style={styles.search}
placeholder="Search"
onChangeText={(value) => {
_searchFilterFunction(value, data);
}}
/>
<FolderInput myFolder={addFolder} />
{filteredData.map((item, index) => {
return <Text key={item.id}>{item.value}</Text>;
})}
</View>
);
};
FolderInput.js - 组件
const FolderInput = (props) => {
//This function we handle the input and output off Folder
const [outputFolder, inputFolder] = useState("");
//This arrow function is handling the folder name on onChangeText in TextInput
const folderName = (entereName) => {
inputFolder(entereName);
};
//Function to clear input when done enter folder name
const clearInput = () => {
props.myFolder(outputFolder);
inputFolder("");
};
return (
// TouchableWithoutFeedback allow to register a touche withou nothing happen to it
<View style={styles.outputContainer}>
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.containerFolder}>
<TextInput
blurOnSubmit
placeholder="Create Folder"
style={styles.containerTextInput}
onChangeText={folderName}
//we pass the name folder into is value by biding and store into outputFolder
value={outputFolder}
/>
<TouchableOpacity>
<AntDesign
onPress={clearInput}
name="addfolder"
backgroundColor="black"
size={30}
/>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
</View>
);
};
export default FolderInput;
非常感谢您提前付出的所有辛勤工作:)
解决方案
您不应该将过滤数据作为状态。它是 searchTerm 和文件夹的计算结果。只需将其声明为:
const filteredDate = folder.filter((item) => {
const textData = searchTerm.toUpperCase();
const nameFolder = item.value.toUpperCase();
return nameFolder.includes(textData);
});
你可以看看这个小吃中的一个简单的搜索实现: https ://codesandbox.io/s/cocky-cori-n704s?file=/src/App.js
推荐阅读
- ssh - 如何通过端口转发创建 SSH 动态转发?
- time-series - 为什么采用 HuggingFace 进行序列分类的第一个隐藏状态(DistilBertForSequenceClassification)
- javascript - 在 React 组件中动态加载外部 javascript 链接
- python - 三和HashMap方法
- ios - 为 Apple 开发者帐户创建 Apple ID
- spring-boot - 在 RabbitMQ 消费者中出现关闭错误
- php - 在我的 laravel 目录中保存 milon 生成的条形码
- python - 迭代至小数点后 12 位
- excel - 如何在 Excel 或 Powershell 中根据 IP 地址搜索域名?
- php - laravel 无法发送电子邮件,也不是错误