与返回函数（咖喱）的处理程序函数反应 - 使用它有什么好处？

Question

I'm writing a component that renders Checkboxes of Categories as part of a large system, here is the code:

import React, { useState, useEffect } from 'react';

const Checkbox = ({ categories, handleFilter }) => {

    const [checked, setChecked] = useState([]);

    // get all the categories that user clicked and send them to the Backend
    const handleToggle = c => () => {
        const currentCategoryId = checked.indexOf(c); // return the first index with cateogry 'c
        const newCheckedCategoryId = [...checked];

        // if currently checked wasn't already in Checked state ==> Push
        // else Pull it

        // User want to Check
        if (currentCategoryId === -1) {
            // not in the state
            newCheckedCategoryId.push(c);
        }
        else {
            // User wants to Uncheck
            newCheckedCategoryId.splice(currentCategoryId, 1); // remove it from the array
        }
        // console.log(newCheckedCategoryId);
        setChecked(newCheckedCategoryId);
        handleFilter(newCheckedCategoryId, 'category');
    }

    return (
        <>
            {
                categories.map((cat, index) => (
                    <li key={index} className='list-unstyled'>
                        <input
                            onChange={handleToggle(cat._id)}
                            value={checked.indexOf(cat._id) === -1}
                            type='checkbox'
                            className='form-check-input' />
                        <label className='form-check-label'>{cat.name}</label>
                    </li>
                ))
            }
        </>

    )
};

export default Checkbox;

Whenever a user clicks one of the Checkboxes the handler handleToggle is invoked.

What I don't understand is why I need to use a curried function?

When I try to use:

const handleToggle = c => { ... } 

Instead of:

const handleToggle = c => () => { ... } 

React throws:

 Unhandled Rejection (Error): Too many re-renders. React limits the number of renders to prevent an infinite loop.

What's the deal here and why is it required to use a curried function ?

Answer 1

The main problem is handleToggle has been evaluated and assigned the result of that function to onChange instead of passing as a callback function.

Based on that you need to change how you call the function handleToggle as:

onChange={() => handleToggle(cat._id)}

From your example:

onChange={handleToggle(cat._id)}

And at the end const handleToggle = c => { ... } will be just fine.

Answer 2

According to your onChange function you are calling function directly instead of assigning it:

onChange={handleToggle(cat._id)} <- Call as soon as this sees

instead you have to do this:

onChange={() => handleToggle(cat._id)}

And define handleToggle like this:

// get all the categories that user clicked and send them to the Backend
    const handleToggle = c => {
        const currentCategoryId = checked.indexOf(c); // return the first index with cateogry 'c
        const newCheckedCategoryId = [...checked];

        // if currently checked wasn't already in Checked state ==> Push
        // else Pull it

        // User want to Check
        if (currentCategoryId === -1) {
            // not in the state
            newCheckedCategoryId.push(c);
        }
        else {
            // User wants to Uncheck
            newCheckedCategoryId.splice(currentCategoryId, 1); // remove it from the array
        }
        // console.log(newCheckedCategoryId);
        setChecked(newCheckedCategoryId);
        handleFilter(newCheckedCategoryId, 'category');
    }