React 复选框不保持切换(认为处于无限循环中)

Question

基本上我有这个：

const [searchUser, setSearchUser] = useState<string[]>([])

我在数组上作为过滤器通过：

reportsData
.filter((value: any) =>
searchUser.length > 0
? searchUser.includes(value.user.name)
: true
)

我创建了将值传递给这个searchUser状态的复选框，这样我就可以用一个(或多个)复选框过滤我的数组像这样：

const EmittersComponent: React.FC<PropsButton> = ({ label, onSelect }) => {
const [checked, setChecked] = useState(false)
function handleSelect() {
onSelect(label)
setChecked(!checked)
}
return (
<div className="grid grid-cols-3 gap-3 lg:grid-cols-2">
<li className="mt-4 flex items-start">
<div className="flex items-center h-5">
<input
type="checkbox"
onChange={() => {
setChecked(checked)
handleSelect()
}}
checked={checked}
className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<span className="font-medium text-gray-700">
{label || 'Sem nome'}
</span>
</div>
</li>
</div>
)
}
function handleToggle(label: string) {
setSearchUser((prev) =>
prev.some((item) => item === label)
? prev.filter((item) => item !== label)
: [...prev, label]
)
}
const emittersComponent = () => (
<div>
{emittersData.map((value: any, index: any) => (
<EmittersComponent
key={index}
label={value.Attributes[2]?.Value}
onSelect={handleToggle}
/>
))}
</div>
)

然后我在我的反应组件<ul>{emittersComponent()}</ul>上渲染它

但问题是，它能正常工作(如果我选择一个或多个复选框，它会过滤我的数组)，但复选框不会一直切换。无论我做什么，它都会呈现为未被切换(空白、未选中的框)。

我认为这是一个无限循环，我无法修复它。

Answer 1

您已经在中调用了setChecked

onChange={() => {
setChecked(checked)
handleSelect()
}}

然后CCD_ 5在CCD_。这是不对的。

我想应该是onChange={handleSelect}

Answer 2

您正在另一个具有自己状态的组件中创建一个组件，因此在每个渲染中都会创建一个emittersComponent。

将发射器组件和发射器组件(更改为发射器组件列表)函数移出Quick Sight组件。

试试下面的方法。如果这不起作用，那么你必须有一个逻辑来知道检查了哪个emittersData。

const EmittersComponentList = ({ emittersData, handleToggle }) => (
<div>
{emittersData.map((value: any, index: any) => (
<EmittersComponent
key={value.Attributes[2]?.Value} // Dont add index as the key, add some unique val
label={value.Attributes[2]?.Value}
onSelect={handleToggle}
/>
))}
</div>
);
const EmittersComponent: React.FC<PropsButton> = ({ label, onSelect }) => {
const [checked, setChecked] = useState(false);
function handleSelect() {
onSelect(label);
setChecked(!checked);
}
return (
<div className="grid grid-cols-3 gap-3 lg:grid-cols-2">
<li className="mt-4 flex items-start">
<div className="flex items-center h-5">
<input
type="checkbox"
onChange={() => {
setChecked(checked);
handleSelect();
}}
checked={checked}
className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<span className="font-medium text-gray-700">
{label || "Sem nome"}
</span>
</div>
</li>
</div>
);
}

在您的快速瞄准组件中

<div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-6">
<div>
<span className="text-xl font-medium text-accent-9">
Escolha os emissores:
</span>
<ul>
{
/* Instead of emittersComponent()
use below                           
*/
<EmittersComponentList
emittersData={emittersData}
handleToggle={handleToggle}
/>
}
</ul>
</div>
<div>