Javascript 反应挂钩设置器不'；阵列拼接后的t触发器重新加载

我有这样一个父组件：

import React from "react";
import Test from "./Test";

function App() {
    const [configs, setConfigs] = React.useState([1, 2, 3])
    return (
        <div>
            {configs.map(((oneConfig, index) =>
                    <Test
                        config={oneConfig}
                        remove={() => {
                            configs.splice(index, 1);
                            setConfigs(configs);
                            console.log(222)
                        }}
                    />))
            }
        </div>
    );
}

export default App;

我希望当我单击“deleteconfig[I]”标记时，相应的

div

将被删除，但不是这样

在函数和控制台行开头的父组件中设置断点后，我发现在执行

setConfigs

方法后，父组件没有重新呈现

---

知道为什么会这样吗？我如何实现从

configs

中删除元素的目标？

问题在于

remove

属性：

配置拼接（索引1）；

splice

变异

配置

状态，直接在React中变异状态是不允许的

尝试重写

删除
道具，如下所示：

remove={() => setConfigs(prev => {
  let left = prev.slice(0, index);   // Everything before configs[index]
  let right = prev.slice(index + 1); // Everything after configs[index]
  return [...left, ...right];
})}

这会将
configs
状态设置为之前的状态，而没有单击其删除按钮的
oneConfig
。
控制台中是否有错误？如果您使用react developers工具，是否可以检查它是否确实已从州的
configs
中删除？公平点。重写。非常感谢，很有效。在地图里移动真是一种糟糕的做法，但我找不到其他方法来做这项工作。我不会说它糟糕，只是要小心你在做什么。另一方面，请考虑在代码中设置<代码>键 PROP，因为您通过<代码> MAP< /代码>生成了它们的数组。像
这样的东西就可以了。
remove={() => setConfigs(prev => {
  let left = prev.slice(0, index);   // Everything before configs[index]
  let right = prev.slice(index + 1); // Everything after configs[index]
  return [...left, ...right];
})}