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

【问题标题】：how to find error useTransition in react-spring?如何在 react-spring 中找到错误 useTransition？
【发布时间】：2021-07-12 10:54:11
【问题描述】：

我是 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。

【问题讨论】：

标签： reactjs animation react-spring

【解决方案1】：

您应该将转换映射的 index 属性更改为 item。像这样的：

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

【讨论】：

抱歉。我忘记了：（