[0,1,2,3].map 工作正常，array.map 给出奇怪的结果

Question

我正在使用成帧器运动，我正在尝试实现交错，以便每个下一个 child 都有一些不错的延迟。有一行关键代码，当我用 recipes.map 替换 [0, 1, 2, 3].map 时，突然所有 children 都被视为一个巨大的块，它们不会交错。

只要看看这个demo，您一定会明白我的意思。这段代码有什么问题？我快疯了:)

function App() {
  const request = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`;
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    getRecipes();
  }, []);

  const getRecipes = async () => {
    const response = await fetch(request);
    const data = await response.json();
    setRecipes(data.meals);
    console.log(data.meals);
  };

  const container = {
    hidden: { opacity: 1, scale: 0 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        when: "beforeChildren",
        staggerChildren: 0.5
      }
    }
  };

  const item = {
    hidden: { x: 100, opacity: 0 },
    visible: {
      x: 0,
      opacity: 1
    }
  };

  return (
    <div className="App">
      <motion.ul variants={container} initial="hidden" animate="visible">
        {[0, 1, 2, 3].map(recipe => (
          <motion.li key={recipe.idMeal} variants={item}>
            <RecipeCard title={recipe.strMeal} />
          </motion.li>
        ))}
      </motion.ul>
      <motion.ul variants={container} initial="hidden" animate="visible">
        {recipes.map(recipe => (
          <motion.li key={recipe.idMeal} variants={item}>
            <RecipeCard title={recipe.strMeal} />
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
}

Answer 1

这有点棘手，但您只需要在项目可用时设置动画：

animate={recipes.length > 0 && "visible"}

那是因为在第一次渲染时，您实际上为一个空数组设置了动画。

animate="visible"

然后，当您在异步调用后更新 recipes 时，您不会再次触发动画。

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
};

const item = {
  hidden: { x: 100, opacity: 0 },
  visible: {
    x: 0,
    opacity: 1
  }
};

const request = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`;

function App() {
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const getRecipes = async () => {
      const response = await fetch(request);
      const data = await response.json();
      setRecipes(data.meals);
      console.log(data.meals);
    };
    getRecipes();
  }, []);

  return (
    <div className="App">
      <motion.ul
        variants={container}
        initial="hidden"
        animate={recipes.length > 0 && "visible"}
      >
        {recipes.map(recipe => (
          <motion.li key={recipe.idMeal} variants={item}>
            <RecipeCard title={recipe.strMeal} />
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
}

[0,1,2,3].map 工作正常，array.map 给出奇怪的结果

[0,1,2,3].map works fine, array.map gives strange results

javascript

reactjs

framer-motion