javascript - 如何在 FlatList 中按照我想要的方式对其进行排序？

Question

我想按照烹饪中 10 种内容和 10 种成分的值的数量匹配的顺序列出项目（在卡片组件中）。

我的最终目标是按照内容和成分匹配的数量顺序列出 Card 组件中的项目。

Cookup 和成分的范围分别为 1 到 10。

      cookup:
      [
        0:{ name: "second" content1: "1" content2: "2" content3: "3" content4: "6" content5: "7" content6: "5" content7: "empty" content8: "10" content9: "8" content10: "9" }

        1:{name: "third" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "5" content6: "empty" content7: "4" content8: "empty" content9: "6" content10: "empty"}

        2:{name: "four" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "4" content6: "empty" content7: "empty" content8: "empty" content9: "empty" content10: "empty"}

        3:{name: "first" content1: "8" content2: "2" content3: "3" content4: "1" content5: "4" content6: "6" content7: "7" content8: "5" content9: "9" content10: "10"}

        4:{name: "fifth" content1: "empty" content2: "empty" content3: "3" content4: "1" content5: "empty" content6: "2" content7: "empty" content8: "empty" content9: "empty" content10: "empty"}
      ]

成分具有这些价​​值。

    ingredients1: 1
    ingredients2: 2
    ingredients3: 3
    ingredients4: 4
    ingredients5: 5
    ingredients6: 6
    ingredients7: 7
    ingredients8: 8
    ingredients9: 9
    ingredients10: 10

我想按照内容和成分匹配数量最多的顺序列出项目。

预期的项目价值是

    item: 

    {name: "first" content1: "8" content2: "2" content3: "3" content4: "1" content5: "4" content6: "6" content7: "7" content8: "5" content9: "9" content10: "10" }

    {name: "second" content1: "1" content2: "2" content3: "3" content4: "6" content5: "7" content6: "5" content7: "empty" content8: "10" content9: "8" content10: "9"}

    {name: "third" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "5" content6: "empty" content7: "4" content8: "empty" content9: "6" content10: "empty" }

    {name: "four" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "4" content6: "empty" content7: "empty" content8: "empty" content9: "empty" content10: "empty"}

    {name: "fifth" content1: "empty" content2: "empty" content3: "3" content4: "1" content5: "empty" content6: "2" content7: "empty" content8: "empty" content9: "empty" content10: "empty" }

我如何修复代码来做到这一点？

这是我的代码

（食物.js）

    const Food = ({route}) => {
      const [lastId, setLastId] = useState(30);
      const {
        ingredients1,
        ingredients2,
        ingredients3,
        ingredients4,
        ingredients5,
        ingredients6,
        ingredients7,
        ingredients8,
        ingredients9,
        ingredients10,
      } = route.params; // Receiving Value
      const {cookUp, hasMorePosts, loadPostsLoading} = useSelector(
        (state) => state.post,
      );

      console.log('cookup:', cookUp);
      return (
        <>
          <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            renderItem={({item}) => (
              console.log('ingredients1:', ingredients1),
              console.log('ingredients2:', ingredients2),
              console.log('ingredients3:', ingredients3),
              console.log('ingredients4:', ingredients4),
              console.log('ingredients5:', ingredients5),
              console.log('ingredients6:', ingredients6),
              console.log('ingredients7:', ingredients7),
              console.log('ingredients8:', ingredients8),
              console.log('ingredients9:', ingredients9),
              console.log('ingredients10:', ingredients10),
              (
                <ImageContainer>
                  <Card
                    item={item}
                    ingredients1={ingredients1}
                    ingredients2={ingredients2}
                    ingredients3={ingredients3}
                    ingredients4={ingredients4}
                    ingredients5={ingredients5}
                    ingredients6={ingredients6}
                    ingredients7={ingredients7}
                    ingredients8={ingredients8}
                    ingredients9={ingredients9}
                    ingredients10={ingredients10}
                  />
                </ImageContainer>
              )
            )}
          />
        </>
      );
    };

    export default Food;

（卡片.js）

    const Card = ({item, ingredients1,ingredients2,ingredients3,
      ingredients4,ingredients5,ingredients6,
        ingredients7,ingredients8,ingredients9,ingredients10,
      }) => {

        console.log("item:",item);
        return (
        <>
        
          </>
        );
    };

    export default Card;

当我 console.log(cookup) 时，cookup 类型是这样的

标签： javascriptnode.jsreactjsreact-native

Answer 1

我仍然不完全确定我理解你在寻找什么。但是，根据我目前的理解，您有一个名为的数组cookout，其中包含基于对象中包含内容或单词“空”的值的数量“更完整”或“更空”的单个对象。

您希望对列表进行排序，首先是最少“空”，最后是最“满”。

我创建了一个“空虚”测试器：

const emptiness = c => Object.values(c).filter(v => v === "empty").length;

它接受一个对象并计算 Object.values 中“空”值的数量。

我使用这个分数对数组进行排序cookout：

const sorted = cookup.sort((a, b) => emptiness(a) - emptiness(b));

const cookup = [
    {
        content1: "1", content2: "2", content3: "3", content4: "6", content5: "7",
        content6: "5", content7: "empty", content8: "10", content9: "8", content10: "9",
        name: "second"
    },
    {
        content1: "1", content2: "2", content3: "3", content4: "empty",
        content5: "5", content6: "empty", content7: "4", content8: "empty",
        content9: "6", content10: "empty", name: "third"
    },
    {
        content1: "1", content2: "2", content3: "3", content4: "empty",
        content5: "4", content6: "empty", content7: "empty", content8: "empty",
        content9: "empty", content10: "empty", name: "four"
    },
    {
        content1: "8", content2: "2", content3: "3", content4: "1", content5: "4",
        content6: "6", content7: "7", content8: "5", content9: "9", content10: "10",
        name: "first"
    },
    {
        content1: "empty", content2: "empty", content3: "3", content4: "1",
        content5: "empty", content6: "2", content7: "empty", content8: "empty",
        content9: "empty", content10: "empty", name: "fifth"
    },
    {
        content1: "empty", content2: "empty", content3: "empty", content4: "1",
        content5: "empty", content6: "2", content7: "empty", content8: "empty",
        content9: "empty", content10: "empty", name: "sixth"
    }
];

const emptiness = c => Object.values(c).filter(v => v === "empty").length;
const sorted = cookup.sort((a, b) => emptiness(a) - emptiness(b));
console.log(sorted);

---

在您的实现中，这可能类似于：

const Food = ({route}) => {
    const [lastId, setLastId] = useState(30);
    const {
        ingredients1,
        ingredients2,
        ingredients3,
        ingredients4,
        ingredients5,
        ingredients6,
        ingredients7,
        ingredients8,
        ingredients9,
        ingredients10,
    } = route.params; // Receiving Value
    const {cookUp, hasMorePosts, loadPostsLoading} = useSelector(
        (state) => state.post,
    );

    const emptiness = c => Object.values(c).filter(v => v === "empty").length;
    
    return (
        <>
            <FlatList
                data={cookUp.sort((a, b) => emptiness(a) - emptiness(b))}