我收到上面的错误“重新渲染太多...”,我正在尝试找出代码有什么问题。根据我在 Chrome 控制台中看到的内容,错误似乎出在第三方库中,而不是我在这里写的。如果我错了,请告诉我。这是我的依赖项: “反应”:“^ 17.0.2”, "react-dom": "^17.0.2", "反应图标": "^4.2.0", “反应脚本”:“4.0.3”, "web-vitals": "^1.1.2"
App.js
import {useState} from 'react'
import Header from './components/Header'
import Tasks from "./components/Tasks";
const App = () => {
const [tasks, setTasks] = useState(
[
{
id: 1,
text: 'Doctor\'s appt',
day: 'Feb 5th at 2:30p',
reminder: true
},
{
id: 2,
text: 'Meeting at School',
day: 'Feb 6 at 1:30p',
reminder: true
},
{
id: 3,
text: 'Meeting at Church',
day: 'Feb 7 at 6:30p',
reminder: true
}
]
);
// Delete Task
const deleteTask = (id) => {
// console.log('delete', id)
//Takes in a function where for each task, filter the data where the task id is not
//equal the the id. This deletes tasks when the 'x' is clicked.
setTasks(tasks.filter((task) => task.id !== id))
}
//Toggle Reminder
const toggleReminder = (id) => {
setTasks(tasks.map((task) =>
task.id === id ? {...task, reminder: !task.reminder } : task
)
)
}
return(
<div className="container">
<Header />
{tasks.length >0 ? (
<Tasks tasks={tasks}
onDelete={deleteTask} onToggle={toggleReminder()} />
):(
'No Tasks to Show'
)}
</div>
)
}
export default App
Tasks.js
import Task from './Task'
const Tasks = ({tasks, onDelete, onToggle}) => {
return (
<>
{tasks.map((task) => (
<Task key={task.id} task={task}
onDelete={onDelete}
onToggle={onToggle}/>
))}
</>
)
};
export default Tasks
Task.js
import {FaTimes} from "react-icons/fa";
const Task = ({task, onDelete, onToggle}) => {
return (
<div
className={`task ${task.reminder && 'reminder'}`}
onDoubleClick={() => onToggle(task.id)}>
<h3>
{task.text}<FaTimes style={{color:'red', cursor:'pointer'}}
onClick={() => onDelete(task.id)}/>
</h3>
<p>{task.day}</p>
</div>
)
}
export default Task
答案 0 :(得分:3)
因为您在渲染时调用 toggleReminder
:onToggle={toggleReminder()}
。就这样更新:
onToggle={toggleReminder}