“无效的挂钩调用。”当使用react useState Hook时

Question

在研究了许多 Stack Overflow 论坛后，我仍然不知道为什么我的代码不断出现可怕的“Hooks 只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：”错误。

我的代码非常简单且易于理解，我使用一个函数来渲染格式化程序以放入单元格组件中，并且我决定使用 Hooks 来获取是否选中复选框的 React 状态。代码如下：

import React, { useState } from "react"
export function checkbox()
{
    const [checked, setCheckbox] = useState(false);

   
    let line_id = this.params.line_id
    let checkedValue = ''
    let checkedString = ''

    if(checked)
    {
        checkedString = ' checked'
        checkedValue = 1
    }
    
    return(
        <td key={line_id} className='fixedWidth field_checkbox' style={{width: '18px'}}>
            <div id={'checkbox'+line_id} className={'text center styled_checkbox'+checked} onClick={() => setCheckbox(prevChecked => !prevChecked)}>
                <input type={'checkbox'} name={'id['+line_id+']'} value={lineId} className='styled_checkbox' />
                <input type={'hidden'} name={'changed_id['+line_id+']'+line_id} id={'changed_id['+line_id+']'+line_id} />
                <input type={'hidden'} name={'checked_id['+line_id+']'+line_id} value={checkedValue} id={'checked_id['+line_id+']'+line_id} />
            </div>
        </td>
    )
}

该函数应该在 html 表的组件中呈现。

Answer 1

发生这种情况是因为您在 div 的 return 语句中使用了 checked 值，

  <div id={'checkbox'+line_id} className={'text center styled_checkbox'+--->checked<---} onClick={() => setCheckbox(prevChecked => !prevChecked)}>
 

我放置了 ---> 和 <--- 在错误所在的代码中。

Answer 2

下面的代码对我来说工作正常

<input
          type={"checkbox"}
          name={"id[" + line_id + "]"}
          value={checked}
          className="styled_checkbox"
        />

Answer 3

所以我基本上找到了为什么我的 Hook 不起作用。我发现钩子不能在循环内使用，并且我在 .map 函数中启动。对于 React 团队来说，如果能将其放入调试器的错误消息中就好了，但至少我不会再犯同样的错误，并希望论坛帖子能够帮助像我这样刚开始使用 Hooks 的人。

感谢大家的帮助！