如何在 react-spring 中找到错误 useTransition？

Question

我是 react-spring 的初学者，我这样写：

import { useState } from "react";
import {animated, useTransition} from "react-spring";

const slides = [
    {
        id: 0,
        url: "./register/1.jpg"
    },
    {
        id: 1,
        url: "./register/2.jpg"
    }

];

function Home(){

    const [ind, set] = useState(0);
    
    const tr = useTransition( slides[ind], item => item.id, {
        from: {opacity: 0 },
        enter: {opacity: 1},
        leave: {opacity: 0}
    } );

    return (
        <div className="register" >
            <div className="pictures" onClick= {()=>set( (ind+1)%2 )}>
                {
                    tr.map( ( {index , props, key} )=> 
                    <animated.img style={props} key = {key} src = {index.url}  /> )
                }
            </div>
            <div className="form"></div>
        </div>
    );
}

export default Home;

但我明白了：

TypeError: 无法读取未定义的属性 'url' （匿名函数） C:/Users/Feruz-PC/Desktop/upwork/QuizApp/frontend/src/Components/Home.js:32

错误很多。但我无法修复它。在这个例子中我使用 react-spring@8.0.5.

Answer 1

您应该将过渡图的索引属性更改为项目。像这样：

tr.map( ( {item , props, key} )=> 
 <animated.img style={props} key = {key} src = {item.url}  />)

如何在 react-spring 中找到错误 useTransition？

how to find error useTransition in react-spring?

animation

reactjs

react-spring