react CSSTransitionGroup的一个问题，求助

Question

如图，明明添加的元素是 “测试10” ，过渡却出现在了 “娱乐” 元素上，这是怎么回事，代码在下面，.fade-appear{  opacity: 0.01;}.fade-appear.fade-appear-active {  opacity: 1;  transition: opacity 500ms ease-in;}.fade-enter {  opacity: 0.01;}.fade-enter.fade-enter-active {  opacity: 1;  transition: opacity 500ms ease-in;}.fade-leave {  opacity: 1;}.fade-leave.fade-leave-active {  opacity: 0.01;  transition: opacity 300ms ease-in;}import React from 'react'import {connect} from 'react-redux'import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';import style from './style.scss'import {removeCate} from '../actions.js'import Item from './item.js'const List = ({cate, children, onRemoveCate}) => {    return (        <ul className={style.cate}>            <CSSTransitionGroup                transitionName={{                    enter: `${style['fade-enter']}`,                    enterActive: `${style['fade-enter-active']}`,                    leave: `${style['fade-leave']}`,                    leaveActive: `${style['fade-leave-active']}`,                    appear: `${style['fade-leave']}`,                    appearActive: `${style['fade-leave-active']}`                }}                transitionAppear={true}                transitionAppearTimeout={500}                transitionEnterTimeout={500}                transitionLeaveTimeout={300}            >                {                    cate.map((item, index) => (                        <Item                             key={index}                             title={item.title}                            onRemove={() => onRemoveCate(item.id)}                        />                    ))                }            </CSSTransitionGroup>            {children}        </ul>    )}

Answer 1

你添加的时候怎么添加的，你用了数组的index来做了元素的key，可能导致你添加的10的index和原来的娱乐的index一样，key换成其他方式试试