Как установить состояние изображения после фильтрации в массиве?

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>
    );
  }
}