时间戳

首页 > 解决方案 > 如何使用 React 钩子从数组中删除一个项目？

javascript - 如何使用 React 钩子从数组中删除一个项目？

问题描述

我正在尝试在 React 中创建一个可编辑的列表，并带有删除某些条目的选项。编辑按预期工作：

 function handleChange(i){

    let newArr = [...entries]; 
    newArr[i].body = event.target.value; 
    setEntries(newArr);

 }

但是如果我尝试实现删除：

    let newArr = [...entries]; 
    newArr.splice(i, 1); 
    setEntries(newArr);

React 抛出以下错误：

渲染的钩子比预期的要少。这可能是由于意外提前退货声明造成的。

我是 React 的新手，所以可能这很明显，因此我为这个问题道歉。老实说，我在问之前用谷歌搜索了很长时间:) 任何建议将不胜感激！

标签： javascriptreactjsreact-hooks

解决方案

离开评论：

“我发现这个 bug 是由 JSX 中的动画引起的：style={useSpring({ fontSize: handleFontSize(i, txt.level) }) }> ` 之所以如此，是因为它使用了钩子，对吗？如何是否有可能让动画继续工作？非常感谢！

您需要将 useSpring 挂钩移到渲染之外（您可以将它放在组件的顶部）：

const springStyles = useSpring({ fontSize: handleFontSize(i, txt.level) })

然后在组件属性中使用该常量：

style={springStyles}

推荐阅读