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

Question

我正在尝试在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的新手，所以可能很明显，因此我对此表示歉意。老实说，我问了很长时间才用Google搜索：)任何建议，将不胜感激！

Answer 1

发表评论：

“”我发现该错误是由JSX中的动画引起的：style = {useSpring（{fontSize：handleFontSize（i，txt.level）}）} >>`是因为它使用了钩子，是吗？对吗？如何保持动画正常工作？非常感谢！”

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

exchange.getIn().setHeader("idAgregador", someEntity.getId());
exchange.getIn().setBody(someEntity);

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

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