React Native：使用数组循环遍历对象数组来创建组件

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 我想在视图中为每个项目显示一个图像，该图像对应于与每个数组项目匹配的 id。

  <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 语法。

有人可以告诉我从 foodList 数组中获取 src 的正确语法吗？

此外，根据文档，使用索引作为键有效，但不赞成，但由于 resultArray 可以（在这种情况下，确实）保存相同的数字/字符串，我假设使用数组项是不可能。考虑到输出只会生成 1-10 个图像组件，使用 Math.random() 是否可以创建密钥？

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

如果图像是本地保存的 <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}} />

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

好的。现在可以了。我稍微更改了 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}}”。

这是基于我发现的在 source={require()} 中使用变量而不是 source={uri:

的并行问题的答案

Why can't string variable be used in <Image source={}/>? (React Native)

这里展示了如何绕过 require 中不允许使用变量的事实。

添加： 控制台.log(src) 给了我 id/src 对象的索引，所以不知何故 src 字符串没有通过，但图像需要。

所以，不完全确定如何/为什么，但是将 src 变成非字符串 require("./path) 并引用它，是可行的。

Answer 5

要从foodList 获取正确的src，请使用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)} />
  );
});