React Native Arrays 过滤问题答案

【问题标题】：React Native Arrays Filtering IssueReact Native Arrays 过滤问题
【发布时间】：2022-02-01 01:39:01
【问题描述】：

下面是一个示例 json 数据。我想根据属性字符串中的值列出水果名称。但我不能那样做。如果你能帮助我，我会很高兴的。

[
    {"Fruit":"Apple","Specifiers":["Green Peel","Red Peel","Yellow Peel","Spherical","From Trees"]},
    {"Fruit":"WaterMelon","Specifiers":["Green Peel","Spherical","From Hebalecous"]},
    {"Fruit":"Grape","Specifiers":["Green Peel","Red Peel","Spherical","From Semi Trees"]}
]

示例：如果我选择 "From Trees"，我的结果应该是 apple

React 原生代码块如下。我哪里做错了？

    import React, { Component } from "react";
    import { Text, View } from "react-native";

    const Datajson = 

        [
            {"Fruit":"Apple",
             "Specfy":["Green Peel","Red Peel","Yellow Peel","Spherical","From Trees"]
            },
    
           {"Fruit":"WaterMelon",
            "Specfy":["Green Peel","Spherical","From Hebalecous"]
           },
    
          {"Fruit":"Grape",
           "Specfy":["Green Peel","Red Peel","Spherical","From Semi Trees"]
          }
       ]

    class jsonArrayToList extends Component {
      render() {
        return (
          <View>
            { /* It' ok Good Results*/
              Datajson
                  .filter(Fruits=>Fruits.Fruit==="Grape")
                  .map(FilteredData=>(<View><Text>{FilteredData.Specfy}</Text></View>))
     
            }
            { /* It's wrong Not Running*/
              Datajson
                  .filter(Fruits=>Fruits.Specfy==="From Trees")
                  .map(FilteredData=>(<View><Text>{FilteredData.Fruit}</Text></View>))
            }
         </View>
      
        );
      }
    }
    export default jsonArrayToList;

问题是：如果水果名称匹配，则列出指定。但如果指定匹配，则不采用水果名称。

如何通过改变json数据结构或者代码块得到结果？您的帮助从现在开始谢谢你。

【问题讨论】：

标签： arrays react-native filter

【解决方案1】：

任何Datajson.Fruit 中的Specfy 是一个数组，而不是像Fruit 这样的文本，因此您无法像过滤常规字符串一样过滤这些文本。过滤数组，这就是您对数组Datajson 所做的，由Fruits.Fruit 过滤。如果我理解正确，您的目标是在 Specfy 匹配时返回水果的名称？使用 JavaScript 的原生函数 .contains() 来搜索数组将是一个很好的解决方案。当数组的任何项包含传递的参数时，它返回true：

...
{
          Datajson
              .filter(Fruits=>Fruits.Specfy.contains("From Trees")) // Will filter for any Fruit that has a `Specfy` matching "From Trees".
              .map(FilteredData=>(<View><Text>{FilteredData.Fruit}</View>)
}
...

【讨论】：

感谢您的回答。但是这段代码不起作用。 { Datajson .filter(Fruits=>Fruits.Specfy.contains("From Trees")) // 将过滤任何具有匹配“From Trees”的Specfy 的水果。 .map(FilteredData=>({FilteredData.Fruit})) }

【解决方案2】：

不要使用“包含”，而是使用“包含”

{ 
  Datajson
   .filter(Fruits=>Fruits.Specfy.includes("From Trees"))
     .map(FilteredData=>(<p>{FilteredData.Fruit}</p>))
}

这将返回 Apple。

【讨论】：

非常感谢大师。这些代码有效。如果你能原谅我，我还有一个问题。让我们从上面的列表中选择两个或多个项目。愿结果带给我们共同的果实。例如：“Green Peel”和“Herbalecous”=西瓜。另一个例子是“Green Peel”和“Red Peel”，结果是葡萄和苹果。
是的，我们可以 .. 这是代码 .. Datajson .filter(Fruits =>{ return Fruits.Specfy.includes("Green Peel") && Fruits.Specfy.includes("Red Peel" )}) .map(FilteredData => (
{FilteredData.Fruit}
)) .. 这将返回 Grape 和 Apple .. 根据您的需要，您可以使用 AND、OR 条件。