Почему моя функция действия вызывается при рендеринге?

Question

Я пытаюсь сделать простой просмотр карты в пользовательском интерфейсе материала, и когда я реализую добавление и удаление элементов, кажется, что функции вызываются несколько раз при рендеринге.

Я знаю, что обычно проблема заключается в 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 (к которым FAB передает реквизиты), action реквизит - это «[c] allback, запускаемый при монтировании компонента». Кажется, вы должны передать функцию addItem как onClick реквизит, а не action реквизит.

Кроме того, передача () => addItem() эквивалентна отдельной передаче обратного вызова addItem. Я полагаю, что проблема, на которую вы ссылаетесь, заключается в использовании onClick={ addItem() }.