Javascript 反应引导表删除按钮单击“不工作”

我已经创建了一个表，现在我希望能够在其中删除单个行。将显示并可以单击该按钮，但不会调用deleteItmen函数。不幸的是，我是React.js的新手，还没有找到解决方案

const Tab = (props) => {
const [showContent, setShowContent] = useState([]);
const [loading, setLoading] = useState(false);
const token = getUser.getCurrentUser().token;

useEffect(() => {
    LoadTable();
    // eslint-disable-next-line
}, []);

const LoadTable = () => {
    if (props.table === undefined)
        getData("device", setShowContent, setLoading);
    else getData(props.table, setShowContent, setLoading);
};

const getHeader = () => {
    return <tr>{showContent[0].map((elem, index) => <th>{elem}</th>)}</tr>
}

const getBody = () => {
    const bodylist = Object.values(showContent.slice(1));
    const body = bodylist.map((elem, index) => ({ ...elem, button: (<button onclick={() => deleteItem(elem.id)}>Delete</button>) }))
    return body.map((row, index) => <tr> {Object.values(row).map((elem, i) => <td> {elem}</td>)} </tr>)
}

const deleteItem = async (id) => {
    await axios.delete('http://localhost:3000/api/' + id, { tablename: props.table }, {
        headers: {
            "x-access-token": token,
        },
    })
    LoadTable();
}

return (
    <div>
        {!loading ?
            <h1>Loading</h1> :

            <table>
                <thead>{getHeader()}</thead>
                <tbody>{getBody()}</tbody>
            </table>
        }
    </div>
);

const选项卡=（道具）=>{
const[showContent，setShowContent]=useState（[]）；
const[loading，setLoading]=useState（false）；
const token=getUser.getCurrentUser（）.token；
useffect（（）=>{
LoadTable（）；
//eslint禁用下一行
}, []);
常量加载表=（）=>{
if（props.table==未定义）
getData（“设备”、设置显示内容、设置加载）；
else获取数据（道具表、设置显示内容、设置加载）；
};
const getHeader=（）=>{
返回{showContent[0].map（（元素，索引）=>{elem}）
}
常量getBody=（）=>{
const bodylist=Object.values（showContent.slice（1））；
constbody=bodylist.map（（元素，索引）=>（{…元素，按钮：（deleteItem（元素id）}>Delete）}））
返回body.map（（行，索引）=>{Object.values（行）.map（（elem，i）=>{elem}）
}
常量deleteItem=async（id）=>{
等待axios。删除（'http://localhost:3000/api/'+id，{tablename:props.table}{
标题：{
“x-access-token”：令牌，
},
})
LoadTable（）；
}
返回(
{！装货？
加载：
{getHeader（）}
{getBody（）}
}
);

将

onclick

更改为

onclick

。。字母

C

必须是大写的。谢谢，我可能忽略了这一点。现在它起作用了。