我想構建一個帶有復選框的自更新過濾器：
//extract tags to new array
const tags = [...new Set(shooting.map(({ tag }) => tag).flat(1))];
// result: tags = ['wedding', 'couple', 'NSWF'] // <- here undefinded count of tags !
function Test() {
return (
<FilterCheckboxBar
filteredTags={tags} />
);}
export default Test;
過濾器復選框欄：
interface Filter {
filteredTags: any;
}
function FilterCheckboxBar(props: Filter) {
const [values, setValues] = useState<any>([]); // <- I guess here is something missing
// ----- Handle Checkbox----- // <- or in this one is an error
const handleChange = (e: any) => {
setValues((prevState: any) => {
const [name] = e.target;
return {
...prevState,
[name]: !prevState[name],
};
});
};
return (
<div className="filterbar">
{/* this list my checkboxes */}
{props.filteredTags.map((list: any, i: any) => (
<label key={i} htmlFor={list}>
<input
className="checkbox"
type="checkbox"
name={list}
id={list}
onChange={(e) =>handleChange(e)}
checked={values}
/>
{list}
</label>
))}
</div>
);
}
export default FilterCheckboxBar;
通過單擊一個復選框，我的頁面變白，并且在控制臺中出現此資訊： Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
我想我必須做點什么 useState但不知道如何構建它。
uj5u.com熱心網友回復：
你可以這樣做：
function FilterCheckboxBar(props: Filter) {
const [values, setValues] = useState<any>(props.filteredTags.reduce((a, c) => (a[c] = false, a), {}));
..
return (
<div className="filterbar">
{Object.keys(values).map((list: any, i: any) => (
..
))}
</div>
);
}
export default FilterCheckboxBar;
此外，而不是const [name] = e.target;它應該是const { name } = e.target;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/536986.html