加载页面时如何始终调用 onClick？错误：超过最大更新深度 [重复]

Posted 2023-02-22

【中文标题】加载页面时如何始终调用 onClick？错误：超过最大更新深度 [重复]

【英文标题】：How onClick is called always when the page is loaded? Error: Maximum update depth exceeded [duplicate]

【发布时间】：2021-11-06 22:50:05

【问题描述】：

我有这段代码来获取用户输入并将其发送回调度

import React,  useState  from 'react';

export default function Form(props) 
  const [book, setBook] = useState(
    title: '',
    author: '',
  );

  const onChange = (e) => 
    if (book[e.target.name] !== e.target.value) 
      setBook(
        ...book,
        [e.target.name]: e.target.value,
      );
    
  ;
  const  add  = props;
  return (
    <form>
      <input onChange=onChange type="text" name="title" placeholder="Title" />
      <input onChange=onChange type="text" name="author" placeholder="Author" />
      <button type="button" onClick=add(book.title, book.author)>Add Book</button>
    </form>
  );

添加函数是这样的：

  const submitBookToStore = (title, author) => 
    const newBook = 
      id: uuidv4(),
      title,
      author,
    ;
    dispatch(addBook(newBook));
  ;

然后我看到这个错误：

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 

奇怪的行为是当我没有点击页面加载时它调用onClick！！

【问题讨论】：

当您需要将函数的引用传递给onClick时，您正在立即调用该函数。 onClick=() => add(book.title, book.author).

【参考方案1】：

如果你这样称呼它：

onClick=add(book.title, book.author)

它将在渲染时运行。 试试这个：

onClick=() => add(book.title, book.author)

那是因为 add() 表示一个函数调用，就像在你的 onChange 中一样，你只是给了一个要调用的函数onChange=onChange，区别在于括号()

【参考方案2】：

尝试以下方法：

import React,  useState  from 'react';

export default function Form(props) 
  const  add  = props;
  const [book, setBook] = useState(
    title: '',
    author: '',
  );

  const onChange = (e) => 
    if (book[e.target.name] !== e.target.value) 
      setBook(
        ...book,
        [e.target.name]: e.target.value,
      );
    
  ;
  const handleAdd = () =>  add(book.title, book.author) 
  return (
    <form>
      <input onChange=onChange type="text" name="title" placeholder="Title" />
      <input onChange=onChange type="text" name="author" placeholder="Author" />
      <button type="button" onClick=handleAdd>Add Book</button>
    </form>
  );

希望对你有帮助