Question

我正在尝试在材料UI中创建一个简单的卡片视图，当我实现添加和删除项目时，这些功能似乎在渲染时多次调用。

我通常知道问题出在action={myFunction}上，但是在这种情况下，我肯定使用过action={() => myFunction()}，所以我不确定是什么原因导致该函数在渲染器上被调用。

const App: React.FC = () => {

  function deleteItem(key: string) : void {
    console.log("deleting " + key);
    setGridItemMap(gridItemMap.filter( (value, i) => value.key !== key ));
  }

  function addItem() : void {
    setGridItemMap(gridItemMap.concat({key : "key1", props: props1}));
  }

  const props1 : GridItemProps = {title:"TitleProp1", body:"BodyProp1"};

  const [gridItemMap, setGridItemMap] = useState([
    {key: "key1", props: props1},
  ]);

  return (
    <Container maxWidth="sm">
      <Grid
        container
        direction="column"
        justify="space-evenly"
        alignItems="stretch"  
        spacing={1}
      >
        {gridItemMap.map( (entry) => (
          <Grid 
          container
          direction="row"
          spacing={1}
          >
            <GridItem key={entry.key} {...entry.props}></GridItem>
            <Fab action={() => deleteItem(entry.key)}>
              <DeleteIcon />
            </Fab>
          </Grid>
        ))}
        <Fab action = {() => addItem()}>
          <AddIcon />
        </Fab>
      </Grid>
    </Container>
  );
}

运行此命令时，我得到标准的“超出最大更新深度。当组件在setState或componentWillUpdate中重复调用componentDidUpdate时，会发生这种情况。React限制了嵌套更新的数量以防止无限循环。”错误，并且该函数被调用了100多次，这表明我设法在某个地方找到了一个更新循环，但找不到位置

Answer 1

问题似乎与使用action道具有关。从ButtonBase上的docs（FAB传递道具到），action道具是“ [c]在组件安装时触发的allback”。似乎您应该将addItem函数作为onClick道具而不是action道具来传递。

此外，顺便说一句，传递() => addItem()等同于传递addItem作为回调本身。我相信您所指的问题是使用onClick={ addItem() }时的情况。

为什么在渲染上调用我的动作函数？

1 个答案: