如何在数组中过滤图像后将其设置为状态？

Question

我有一个数组：

array: [
{
second: 1,
source: Thing1,
},
{
second: 2,
source: Thing2,
}
]

我想渲染数组中source的图像。源是导入的图像。

我想将图像(source(设置为状态。但我不确定状态项应该初始化为什么类型。我问这个是因为它根本没有渲染。 以下是初始化状态：

filteredPic: null,

下面是执行筛选器的函数：

if((time === 1)) {
filterArrayPic = this.array.filter((item) => {
return item.second === 1;
}).map((item) => {
return console.log(item.source)
})
this.setState({
filteredPic: filterArrayPic 
}, () => {
console.log(this.state.filteredPic)
})          
}    

你能发现函数或初始化的状态类型有问题吗？

Answer 1

您提供的代码中存在一些问题。 1.过滤后的数组设置为映射，并且您控制台从映射记录，因此它不会返回任何内容，并且此处根本不需要此映射。 2.由于您需要单个项目，因此可以使用查找功能而不是过滤器。

这是代码的工作版本。 您可以在组件中使用该块

export default class App extends React.Component {
state = {
filteredPic: null,
};
array = [
{
second: 1,
source: require('./assets/snack-icon.png'),
},
{
second: 2,
source: require('./assets/snack-icon.png'),
},
];
onPress = () => {
const filterArrayPic = this.array.find((item) => {
return item.second === 1;
});
console.log(filterArrayPic);
this.setState(
{
filteredPic: filterArrayPic.source,
},
() => {
console.log(this.state.filteredPic);
}
);
};
render() {
return (
<View style={{ width: 300 }}>
<Button onPress={this.onPress} title="Set Image" on />
<Image
source={this.state.filteredPic}
style={{ width: 100, height: 100 }}
/>
</View>
);
}
}