时间戳

首页 > 解决方案 > 从子组件调用时回调函数不起作用

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

问题描述

我想从子组件更改父状态。我认为我的代码正确但不起作用。

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>
</>
);
}

这是我的子组件

标签： reactjscallbackreact-props

解决方案

问题

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
  );
}

推荐阅读