正在搜索使用异步存储存储的项目

Question

我有一个显示在使用异步存储存储的平面列表(卡(中的项目列表，我想使用搜索栏进行搜索，我从this中获得项目(存储在异步存储中(的数据。状态保存，如您在下面的代码中所见

出于某种原因，我的方法不起作用，我不明白为什么？我为长代码道歉，任何帮助都将不胜感激

class SaveSearchList extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
temp: [],
error: null,
search: null,
saved: [],
};
}
removeItem = () => {
DeleteItem("saved")
.then((res) => {
this.setState({
saved: [],
});
console.log(res);
})
.catch((e) => console.log(e));
};
componentDidMount = () => {
this.getData();
this.readItems();
this.unsubscribe = this.props.navigation.addListener(
"focus",
this.readItems
);
};
componentWillUnmount() {
this.unsubscribe();
}
readItems = () => {
ReadItem("saved")
.then((res) => {
if (res) {
const saved = JSON.parse(res);
this.setState({
saved: saved,
});
}
})
.catch((e) => console.warn(e));
};
getData = async () => {
this.setState({ loading: true });
try {
this.setResult(this.state.saved);
} catch (e) {
this.setState({ error: "Error Loading content", loading: false });
}
};
setResult = (res) => {
this.setState({
data: [...this.state.data, ...res],
temp: [...this.state.temp, ...res],
error: res.error || null,
loading: false,
});
};
renderHeader = () => {
return (
<View style={{}}>
<Text
style={{
color: colors.shade2,
fontSize: 30,
fontWeight: "bold",
textAlign: "center",
}}
>
Browse Saved Articles
</Text>
<SearchBar
containerStyle={{
borderWidth: 1,
borderRadius: 5,
borderColor: "#353540",
borderTopColor: "#353540",
borderBottomColor: "#353540",
}}
inputContainerStyle={{ backgroundColor: colors.shade1 }}
round
showLoading
placeholder="Search for articles"
onChangeText={this.updateSearch}
value={this.state.search}
/>
</View>
);
};
updateSearch = (search) => {
this.setState({ search }, () => {
if ("" == search) {
this.setState({
data: [...this.state.temp],
});
return;
}
this.state.data = this.state.temp
.filter(function (item) {
return item.title.includes(search);
})
.map(function ({ id, title, category, img, content }) {
return { id, title, category, img, content };
});
});
};
render() {
return this.state.error != null ? (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Text>{this.state.error}</Text>
<Button
onPress={() => {
console.log("nothing");
}}
title="Reload"
/>
</View>
) : (
<View style={{ top: 50 }}>
<FlatList
style={{}}
ListHeaderComponent={this.renderHeader}
data={this.state.saved}
keyExtractor={(item) => item._id}
renderItem={({ item }) => {
return (
<TouchableScale
activeScale={0.9}
tension={50}
friction={7}
useNativeDriver
onPress={() =>
this.props.navigation.navigate("DetailScreen", {
data: item,
})
}
>
<View style={{ left: 10, top: 20 }}>
<Card item={item} />
</View>
</TouchableScale>
);
}}
/>
<View style={styles.button}>
{this.state.saved.length > 0 && (
<AppButton
title="Remove Key"
color="secondary"
onPress={this.removeItem}
/>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
top: 20,
width: 300,
height: 250,
alignItems: "center",
left: 40,
},
});
export default SaveSearchList;

Answer 1

如果我说得对，你正在加载所有保存的项目，然后你想使用搜索文本对它们进行过滤(只有与搜索相关的项目才会出现(。

问题是改变搜索栏文本改变了"；this.state.data"；而平面数据是"0"；this.state.saved"；，其在搜索文本改变之后没有被改变。

为了更清楚，我添加了一段我认为应该更改的代码。

电流：

updateSearch = (search) => {
this.setState({ search }, () => {
if ("" == search) {
this.setState({
data: [...this.state.temp],
});
return;
}
this.state.data = this.state.temp
.filter(function (item) {
return item.title.includes(search);
})
.map(function ({ id, title, category, img, content }) {
return { id, title, category, img, content };
});
});
};

和

...
...
<FlatList
style={{}}
ListHeaderComponent={this.renderHeader}
data={this.state.saved}
keyExtractor={(item) => item._id}
renderItem={({ item }) => {
return (
<TouchableScale
activeScale={0.9}
tension={50}
friction={7}
...
...

更改为：

updateSearch = (search) => {
this.setState({ search }, () => {
if ("" == search) {
this.setState({
data: [...this.state.temp],
});
return;
}
this.setState({ data: this.state.temp
.filter(function (item) {
return item.title.includes(search);
})
.map(function ({ id, title, category, img, content }) {
return { id, title, category, img, content };
});
});
};

和

...
...
<FlatList
style={{}}
ListHeaderComponent={this.renderHeader}
data={this.state.data}                   <------------- CHANGED --------
keyExtractor={(item) => item._id}
renderItem={({ item }) => {
return (
<TouchableScale
activeScale={0.9}
tension={50}
friction={7}
...
...

和

readItems = () => {
ReadItem("saved")
.then((res) => {
if (res) {
const saved = JSON.parse(res);
this.setState({
saved: saved, temp: saved, data: saved          //  <---------- CHANGED ----
});
}
})
.catch((e) => console.warn(e));
};