React 钩子设置器在数组拼接后不会触发重新渲染

Question

我有一个像这样的父组件：

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;

CCD_ 1组件类似于这个

export default function Test(props) {
return(
<div style={{border: "solid 1px", margin: "5px"}}>
<p>This is config {props.config}</p>
<a href="/" onClick={() => props.remove()}>delete config{props.config}</a>
</div>
)
}

我希望当我点击"；删除配置[i]"；一个标签，相应的div将被删除，但它不会以这种方式发生。

在函数和控制台行的开头在父组件中设置了断点后，我发现在执行setConfigs方法后，父组件不会重新渲染。

知道为什么会这样吗？我该如何实现从configs中删除元素的目标？

Answer 1

remove道具中的问题：

configs.splice(index, 1);

splice使configs状态发生突变，直接在React中发生突变是不允许的。

试着这样重写你的remove道具：

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状态等于没有单击其删除按钮的Test0的上一个状态。