尝试使用复选框并使用状态过滤数组，复选框不会保持选中状态

Question

我有一个数组，名为reportsData，然后我需要过滤它，生成一些复选框，每个复选框都有一个基于来自另一个数组(emittersData(的每个名称的标签，所以基本上我这样设置它：

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

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

然后我把我的复选框呈现成这样：

function EmittersCheckboxes () {
const [checkedState, setCheckedState] = useState(
new Array(emittersData.length).fill(false)
)
const handleOnChange = (position: any, label: any) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
)
setSearchUser((prev) =>
prev.some((item) => item === label)
? prev.filter((item) => item !== label)
: [...prev, label]
) 
setCheckedState(updatedCheckedState)
};
return (
<div className="App">
{emittersData.map((value: any, index: any) => {
return (
<li key={index}>
<div className="toppings-list-item">
<div className="left-section">
<input
className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
type="checkbox"
id={`custom-checkbox-${index}`}
name={value.Attributes[2].Value}
value={value.Attributes[2].Value}
checked={checkedState[index]}
onChange={() => handleOnChange(index, value.Attributes[2].Value)}
/>
<label className="ml-3 font-medium text-sm text-gray-700 dark:text-primary" htmlFor={`custom-checkbox-${index}`}>{value.Attributes[2].Value}</label>
</div>
</div>
</li>
);
})}
</div> 
)
}

在react组件上，我呈现每个复选框，即li，如：

<ul><EmittersCheckboxes /></ul>

我在最后渲染了mappedAndFiltered。

然后就可以了，当我点击每个生成的复选框时，它会过滤设置setSearch用户中状态的数组，然后过滤数组。

你可以在这里查看：流媒体。com/v6bpk6请查看过滤器是否正常工作，数组中的项目总数是否根据选中的复选框(一个或多个(而变化。

但问题是，每个复选框并没有变成"已选中"，而是保持空白(未切换(。

我做错了什么，为什么它不自我检查呢？

Answer 1

您已经在另一个组件中定义了EmittersCheckboxes组件。每次父组件渲染(通过状态更改(时，您的内部组件都会被重新定义，一次又一次地导致它失去React为您保留的内部状态。

这里有一个简化的例子：

import React, { useState } from "react";
function CheckboxeComponent() {
const [checkedState, setCheckedState] = useState(false);
return (
<div>
<span>CheckboxeComponent</span>
<input
type="checkbox"
checked={checkedState}
onChange={() => setCheckedState((x) => !x)}
/>
</div>
);
}
export default function App() {
const [counter, setCounter] = useState(1);
function InternalCheckboxeComponent() {
const [checkedState, setCheckedState] = useState(false);
return (
<div>
<span>InternalCheckboxeComponent</span>
<input
type="checkbox"
checked={checkedState}
onChange={() => setCheckedState((x) => !x)}
/>
</div>
);
}
return (
<>
<InternalCheckboxeComponent />
<CheckboxeComponent />
<button onClick={() => setCounter((c) => c + 1)}>{counter}</button>
</>
);
}

有一个App(父组件(，它有自己的状态(counter(，有一个按钮可以更改此状态，单击此按钮将增加计数器，导致应用程序的重新呈现。此重新渲染会在每次渲染时重新定义一个名为InternalCheckboxeComponent的新组件。

InternalCheckboxeComponent还具有内部状态(checkedState(。

还有一个外部定义的功能组件，名为CheckboxeComponent，有了这个组件，React能够保持自己的状态，因为它没有被重新定义(这是相同的功能(

如果将每个的状态设置为"0"；"已检查"；并单击按钮，这将导致App的重新渲染，这将重新定义InternalCheckboxeComponent函数，导致React失去状态。并且CCD_ 15状态保持在React中，因为它是相同的功能。