Реагировать на родной: цикл по массиву объектов с использованием массива для создания компонентов

Question

В React Native (я очень новичок в React) у меня есть функция javascript, которая возвращает массив в переменной myResult.Напечатанный в терминале, он показывает:

 Array [
 25,
 25,
 20,
 10,
 5,
 5,
]

, который я добавляю в состояние с помощью

    this.setState({resultArray: myResult});

Затем в состоянии у меня есть массив, подобный так:

   this.state = {
      foodList: [
    {id: "25", 
    src: `"./images/banana25.png"`
  },
    {id: "20",
    src: `"./images/banana20.png"`
  },
    {id: "15",
    src: `"./images/apple15.png"`
  },
    {id: "10",
    src: `"./images/mango10.png"`
  },
    {id: "5",
    src: `"./images/steakNeggs5.png"`
  },
   }

Используя resultArray, я хочу показать изображение в представлении для каждого элемента, изображение, соответствующее идентификатору, который соответствует каждому элементу массива.

  <View style={{height: 318, flexDirection: "row" }}>

   {this.state. resultArray.map((item, key) => {
      let src = this.state.foodList.item.src
     return (
      <Image key={key} style={{flexDirection: "row" }} source={require({src})} />
     );
  })}

 </View>

Очевидно, что это не работает, так как я надеваюне имеет синтаксиса право для SRC.

Может кто-нибудь показать мне правильный синтаксис для получения src из массива foodList?

Кроме того, согласно документам, использование индекса в качестве ключа работает, но не одобряется, но, посколькуresultArray может (и в этом случае делает) содержать идентичные числа / строки, использование элементов массива, я полагаю, невозможно.Будет ли использование Math.random () способом создания ключа, учитывая, что на выходе будут только 1-10 компонентов изображения?

Answer 1

Я считаю, что строка должна быть такой:

<View style={{height: 318, flexDirection: "row" }}>

   {this.state.resultArray.map((item, key) => {
      let src = this.state.foodList.find(food => +food.id === item).src;
     return <Image key={key} style={{flexDirection: "row" }} source={uri: src)} />;
  })}

 </View>

Кроме того, использование Math.random для ключа одинаково осуждается. Пожалуйста, прочитайте https://reactjs.org/docs/reconciliation.html

Answer 2

OK. Теперь это работает. Я немного изменил массив foodList, чтобы элементы были перечислены как:

 {id: "25", 
    src: require("./images/banana25.png"),
  },
    {id: "20",
    src: require("./images/banana20.png"),
  }, 
  etc, etc.

Затем я изменил компонент на:

 <View style={{height: 318, flexDirection: "row" }}>
    {this.state.resultArray.map((item, key) => {
    let src = this.state.foodList.find(food => +food.id === item).src;
    return <Image key={key} style={{flexDirection: "row" }} source={src} />;
   })}

  </View>

Обратите внимание, что это "source = {src}", а не "source = {{src}}".

Это было основано на ответе, который я нашел на параллельную проблему с использованием переменной в источнике = {require ()} в противоположность источнику = {uri:

Почему строковую переменную нельзя использовать в ? (React Native)

где показано, как обойти тот факт, что переменные не разрешены в требовании.

Добавление в: console.log (SRC) дает мне индексы объекта id / src, так что каким-то образом строка src не проходит, но требуется изображение.

Итак, не совсем точно знаю, как / почему, но превращение src в нестроковый require ("./ path) и обращение к нему работает.

Answer 3

После небольшого беспокойства, чтобы получить правильные скобки и скобки, я придумал:

    <View style={{height: 318, flexDirection: "row" }}>
      {this.state.resultArray.map((item, key) => {
      let src = this.state.foodList.find(food => +food.id === item).src;

       console.log(src);

      })}
     </View>

Это дало мне ожидаемый результат в консоли / Терминале:

 "./images/banana25.png"
 "./images/banana25.png"
 "./images/banana25.png"
 "./images/banana20.png"
 "./images/coconut2.5.png"
 "./images/pineapple0.5.png"
 "./images/pineapple0.5.png"

Но с добавленным тегом / компонентом изображения:

 {this.state.resultArray.map((item, key) => {
  let src = this.state.foodList.find(food => +food.id === item).src;
  return(
  <Image key={key} style={{flexDirection: "row" }} source={require({src})} />
  );

})}

Я получаю сообщение об ошибке в терминале:

 Critical dependency: the request of a dependency is an expression

и в iPhoneиспользуя приложение Expo, я получаю:

Не уверен, что означает src: src или, учитывая, что терминал показывает правильный путь, почему тег Imageвыдает ошибку.

Answer 4

Чтобы получить правильный Src от foodList, используйте Array find()

this.state.resultArray.map((id, index) => {
  const { src } = this.state.foodList.find(item => item.id === id);
  return (
    <Image key={index} style={{flexDirection: "row" }} source={require(src)} />
  );
});

Answer 5

Если изображение сохранено локально, оно <Image source={require('./path/to/image')}. Если вам нужно загрузить изображение с URL, это: <Image source={{uri: 'https://www.url.to/image.png'}}.

Так что в вашем случае, если изображение не находится в папке проекта, это:

<Image key={key} style={{flexDirection: "row" }} source={{uri:src}} />