Javascript 如何通过正确的生命周期使用改进此React组件？

我正在尝试使列表项打开和关闭。因此，我捕获单击事件，使用

PATCH

方法向我的端点发送请求，获取从后端返回的新值，并根据该值更新组件的状态。而且它工作得很好。但我觉得我可能不得不在这里以某种方式使用

useffect

。但我不知道怎么做。如有任何建议，将不胜感激

import { useState } from 'react';
import { useSelector } from 'react-redux';

export function ListItem({ id, content, checked }) {
    const token = useSelector(state => state.auth.token);

    const [isChecked, setIsChecked] = useState(checked);

    const makeRequest = async () => {
        const uri = `http://127.0.0.1:8000/listitems/${id}/`;

        const h = new Headers();
        h.append('Authorization', `Token ${token}`);
        h.append('Content-Type', 'application/json');

        const req = new Request(uri, {
            method: 'PATCH',
            headers: h,
            body: JSON.stringify({
                checked: !isChecked
            }),
            mode: 'cors'
        })

        const response = await fetch(req);
        const json = await response.json();
        
        const result = json.checked;

        return result;
    }

    const handleClick = async (e) => {
        // request the endpoint to check/uncheck the item
        const result = await makeRequest();

        // add/remove the strikethrough class to/from the content
        setIsChecked(result);
    }

    return (
        <>
        <label>
            <input onChange={handleClick} type="checkbox" name="list-items" checked={isChecked}/>
            {isChecked ? <s children={content} /> : content}
        </label> <br/>
        </>
    );
}

从'react'导入{useState}；
从'react redux'导入{useSelector}；
导出函数ListItem（{id，content，checked}）{
const token=useSelector（state=>state.auth.token）；
const[isChecked，setIsChecked]=使用状态（已检查）；
const makeRequest=async（）=>{
常量uri=`http://127.0.0.1:8000/listitems/${id}/`；
const h=新头文件（）；
h、 追加（'Authorization'，'Token${Token}`）；
h、 追加（'Content-Type'，'application/json'）；
const req=新请求（uri{
方法：'补丁'，
标题：h，
正文：JSON.stringify({
选中：！已选中
}),
模式：“cors”
})
常量响应=等待取数（req）；
const json=await response.json（）；
const result=json.checked；
返回结果；
}
常量handleClick=async（e）=>{
//请求端点选中/取消选中该项
const result=等待makeRequest（）；
//在内容中添加/删除删除删除线类
设置检查（结果）；
}
返回(
{isChecked？：content}


);
}

这看起来很合理，但我建议防止多个复选框更改触发多个复选框requests@CertainPerformance你能告诉我一个资源，在那里我可以读到更多关于如何实现这一点的资料吗？我正在尝试建立一个协作列表，例如Google Keep允许多个用户处理并建立一个列表。因此，一旦有人签出列表项，数据库就会更新，这一点很重要。在请求进行中，您可能至少要禁用该复选框。实际上，不确定是否需要该复选框。如果

makeRequest

需要10秒，您是否能够在10秒结束前触发多个

handleClick

s？如果没有，那就没什么好担心的了。如果是这样，请在处理程序内部调用

e.preventDefault

或类似的方法来修复它。在React外部，它将阻止单击切换复选框。