从子组件调用时回调函数不起作用

Question

我想改变子组件的父组件状态。我认为我的代码是正确的，但不能工作。

const [newValidate, setNewValidate] = useState<Array<boolean>>(new Array(checkList.length).fill(false));

这是我的父状态

{checkList.map((row, index) => {
const changeValidate = () => {
setNewValidate(newValidate.splice(index, 1, true));
} return ( <>
<ConfirmButton callBack={changeValidate} />
<RejectButton callBack={changeValidate} />
</>)})}

这是我在父组件

中的映射

export function ConfirmButton(props: ButtonProps) {
const { callBack } = props;
return (
<>
<IconButton
onClick={() => callBack()}
className={classes.confirm}
aria-label="confirm check"
>
<CheckIcon />
</IconButton>
</>
);
}

这是我的子组件

Answer 1

Issue

array.prototype。Splice改变数组

splice()方法通过删除或来改变数组的内容替换现有元素和/或在位置添加新元素.

const changeValidate = () => {
setNewValidate(newValidate.splice(index, 1, true)); // <-- mutation
}

<标题>

解决方案如果你想更新特定索引处的值，你需要浅层复制整个状态数组。将前一个状态映射到下一个状态，当映射索引i与所包含的index匹配时，返回更新后的值，否则返回现有值。我还建议使用函数状态更新，因为下一个状态数组依赖于前一个状态数组。

const changeValidate = () => {
setNewValidate(
newValidate => newValidate.map((el, i) => i === index ? true : el
);
}