reactjs - React 重新渲染限制问题

Question

我收到上面的错误“重新渲染太多......”，我试图找出代码有什么问题。根据我在 Chrome 控制台中看到的内容，错误似乎出在第三方库中，而不是我在这里写的。如果我错了，请告诉我。这是我的依赖项：“react”：“^17.0.2”，“react-dom”：“^17.0.2”，“react-icons”：“^4.2.0”，“react-scripts”：“4.0 .3", "web-vitals": "^1.1.2"

应用程序.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

任务.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

任务.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

标签： reactjs

Answer 1

因为你调用toggleReminder了 render: onToggle={toggleReminder()}。只需像这样更新：

onToggle={toggleReminder}