如何将 React 组件的自定义钩子与"map"一起使用

Question

我正在尝试制作一个Checkbox组件。

这是我的Checkbox.tsx。

import React from "react";
import * as S from "./style";
const Checkbox: React.FC<S.ICheckboxProps> = ({ checked, setChecked }) => {
return <S.StyledCheckbox checked={checked} onClick={setChecked} />;
};

这是我的useCheckbox.tsx，

import { useState } from "react";
export const useCheckbox = (initialState: boolean) => {
const [checked, _setChecked] = useState<boolean>(initialState);
const setCheckedToggle = () => _setChecked((prev) => !prev);
const setCheckedTrue = () => _setChecked(true);
const setCheckedFalse = () => _setChecked(false);
return { checked, setCheckedToggle, setCheckedTrue, setCheckedFalse };
};
export default Checkbox;

效果很好。我可以像一样使用这个

import Layout from "components/Layout";
import { useCheckbox } from "hooks/useCheckbox";
import Checkbox from "components/Checkbox";
const Home = () => {
const { checked, setCheckedToggle } = useCheckbox(false);
return (
<Layout>
<Checkbox checked={checked} setChecked={setCheckedToggle} />
</Layout>
);
};
export default Home;

但我在List组件中遇到了问题。

List有一个Checkbox组件，我必须将这个List与data一起使用。

const Home = ({data}) => {
return (
<Layout>
{data.map((d) => <List />)}
</Layout>
);
};

在这种情况下，有没有办法确定是否选择了该列表？

如果List具有useCheckbox，则Home组件不知道checked的状态。

我应该在Home组件中使用useCheckboxdata.length次吗？我认为这不好。

感谢阅读，新年快乐。

Answer 1

如果您希望复选框状态存在于Home级别，那么您需要Home组件中的状态，该状态可以作为数组或对象处理多个项。

然后，在映射data的地方，可以将checked和setChecked作为道具传递给List，Home中定义的所有逻辑都使用与Home状态相关的项索引(如果有ID，最好是ID(。

下面是一个可以在Home中使用的钩子示例

import { useState } from "react";
export const useCheckboxes = () => {
const [checkedIds, setCheckedIds] = useState([]);
const addToChecked = (id) => setCheckedIds((prev) => [...prev, id]);
const removeFromChecked = (id) =>
setCheckedIds((prev) => prev.filter((existingId) => existingId !== id));
const isChecked = (id) => !!checkedIds.find(id);
const toggleChecked = (id) =>
isChecked(id) ? removeFromChecked(id) : addToChecked(id);
return { isChecked, toggleChecked };
};

你会像这个一样使用它

const Home = ({ data }) => {
const { isChecked, toggleChecked } = useCheckboxes();
return (
<Layout>
{data.map((d) => (
<List
key={d.id}
checked={isChecked(d.id)}
toggleChecked={() => toggleChecked(d.id)}
/>
))}
</Layout>
);
};