为什么 onClick 上的函数<li>标签在点击之前运行？

Question

https://codesandbox.io/s/todo-4yo7h?file=/src/App.js
为什么 ToggleComplete(index) 函数会触发此错误？

太多的重新渲染。 React 限制渲染次数以防止无限循环。

我把 onClick 放在 li 标签上，这意味着只有在点击时才触发该功能，但是一旦输入待办事项列表，我就会遇到这个渲染问题。
我只是想通过设置 isCompleted = true 在点击时点击待办事项列表。
我究竟做错了什么？

Answer 1

您正在立即调用该函数，请尝试

<li
   key={index}
   index={index}
   onClick={() => toggleComplete(index)} // use an arrow function, or else it will be triggering itself
   style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
>

Answer 2

我致力于调试它。 用这个

onClick={() => toggleComplete(index)}

你的函数只有在被点击时才会触发。

完整代码： https : //codesandbox.io/s/todo-forked-bv978?file=/ src/ App.js