从数组到数组问题的单字段映射

Question

我为一个基本的纸牌游戏找到了这个不错的实现

它基于这一点(尽管略有不同)：

https://react-spring.io/hooks/use-springs#usesprings < doc

https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/cards-stack < doc示例代码

所以问题是：

它有两个数组

1. cards，它存储卡片的索引(硬编码)

1. cardData，它存储卡片的内容(硬编码)

我想做的是基于cardData.id动态绑定数组1

这做半工作，它编译和你可以刷卡。然而，当所有的卡片已经清除板，它将不会重置，因为它将与卡编码的卡。

import React, { useState, useEffect } from "react";
import { useSprings } from "react-spring";
import { useGesture } from "react-with-gesture";
import Card from "./Card";

const cardData = [
  {
    id: 1,
    question: "Islamic finance doesnt have different requirements",
    pic:"https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80",
    text:
      "Check out week 5 documents",
    correct: false,
    value: 15
  },
  {
    id: 2,
    question: "CEO requirements",
    pic:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdoerlife.com%2Fwp-content%2Fuploads%2F2020%2F03%2FSP.png&f=1&nofb=1",
    text: "They must decide high-level policy and strategy",
    correct: true,
    value: 6
  },

  {
    id: 3,
    question: "The sky is green",
    text: "Make sure to look outside!",
    correct: false,
    value: 2
  }
  ,
  {
    id: 4,
    question: "This signifies British currency",
    pic: "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.kindpng.com%2Fpicc%2Fm%2F112-1123896_black-pound-sterling-symbol-clipart-pound-sign-hd.png&f=1&nofb=1",
    text:
      "Maybe check in your wallet",
      correct: true,
      value: 17
  }
];

const cards = [1, 2, 3, 4];

const to = i => ({
  x: 0,
  y: i * -12,
  scale: 1,
  rot: -10 + Math.random() * 20,
  delay: i * 150
});
const from = i => ({ rot: 0, scale: 1.5, y: -1000 });

const trans = (r, s) =>
  `perspective(1500px) rotateX(15deg) rotateY(${r /
    10}deg) rotateZ(${r}deg) scale(${s})`;

function Swipe() {
  console.log(cardData)
  // const [cards, setCards] = useState([]);

  // useEffect( () => {

  //   cardData.map(({id}) => {
  //     setCards(prev => [...prev, id]) // this doesnt reset cards after sorting all
  // })
  // },[])

  const [gone] = useState(() => new Set());

  const [props, set] = useSprings(cards.length, i => ({
    ...to(i),
    from: from(i)
  }));


  const bind = useGesture(
    (
      { 
      args: [index],
      down,
      delta: [xDelta],
      distance,
      direction: [xDir],
      velocity
    }) => {
      const trigger = velocity > 0.2;

      const dir = xDir < 0 ? -1 : 1;

      if (!down && trigger) gone.add(index);
      set(i => {
        if (index !== i) return;
        const isGone = gone.has(index);
        if (isGone){
          console.log("index",i)
          console.log("isgone",isGone) // grab by is gone
          console.log("cards",cards)
          // set()

        }
        const x = isGone ? (200 + window.innerWidth) * dir : down ? xDelta : 0;
        const rot = xDelta / 100 + (isGone ? dir * 10 * velocity : 0);
        const scale = down ? 1.1 : 1;
        return {
          x,
          rot,
          scale,
          delay: undefined,
          config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 }
        };
      });

      if (!down && gone.size === cards.length)
        setTimeout(() => gone.clear() || set(i => to(i)), 600);
        // insert game end here
    }
  );

  return (
    <div className="swipe">
      {props.map(({ x, y, rot, scale }, i) => (
        <Card i={i} x={x} y={y} rot={rot} scale={scale} trans={trans} cardData={cardData} bind={bind} key={i}/>
      ))};
    </div>);
}

export default Swipe;

下面是一个使它更易读懂的活例子：https://codesandbox.io/s/wandering-lake-iwzns5?file=/src/App.js

欢迎任何建议！

Answer 1

结果发现，我所发现的与文档略有不同的推动力，因为某种原因，在不需要的时候有两个单独的数组。将cards实例转换为cardData似乎很好。