Question

我有一个简单的反应应用程序，可以移动和取消一系列字母。当用户点击back和next按钮时，就会发生转换动画。在功能上，数组已正确更改，但转换仅适用于// this is the issue. clickLeftRightHandler = () => { const { list } = this.state; // Does using slice or shifting the array cause a new redraw? Is it the CSS? const newList = [list[list.length-1], ...list.slice(0, -1)]; this.setState({list : newList}); }。我有一种预感，这可能是一个比React更基本的问题，但我确实确保密钥是唯一的，以防止重绘。

config.js

代码链接： https://stackblitz.com/edit/react-7nsrjg

任何帮助表示赞赏！

Answer 1

只需使用unshift方法：

clickLeftRightHandler = () => {

    const { list } = this.state;
    const newList = list.slice(0, -1);

    newList.unshift(list[list.length-1]);   // <-- right here 
    this.setState({list : newList});
}

working example

修改

我很好地不知道它为什么会起作用，但似乎字符串有点长，动画就像你想要的那样工作，所以这很有效：

newList.unshift(list[list.length-1]+' ');

example。我真的不知道为什么会发生这种情况。

Answer 2

事实证明，动画无法正常工作的原因是由于键被提供给Alphabet Component。该解决方案添加了一个索引状态，以确保移位的密钥接收到与循环密钥不同的新密钥。

还应该注意的是，@ yuvi的更新示例还隐式修复了一个新字符串的问题，该字符串将被传递给密钥，导致它被唯一设置。

查看更新的example

数组更改时CSS转换丢失

2 个答案: