如何取消选中 useEffect

Question

我有一个如下图所示的行列表。当您单击多个复选框以选择多行时，selectedIds 将作为道具传递给 PostBulkActionButtons。

这是我的 PostBulkActionButtons 组件：

export default function PostBulkActionButtons(props) {
    const [recipes, setRecipes] = useState([]);
    const ids = props.selectedIds;
    useEffect(() => {
        ids.map((id) => {
            async function fetchData(id) {
                const res = await ajax.getMealPlan(id);
                setRecipes((recipes) => [...recipes, res.data.data]);
            }
            fetchData(id);
        });
    }, [ids]);
    
    return <div>{recipes}</div>;
}

问题是当我取消选中一行时，食谱仍然包含未选中的行。我知道上面的代码会在每个 select 上生成重复的行，我已经设法解决了这个问题！任何 suggestions/solutions 将不胜感激！

谢谢！

Answer 1

当您执行 setRecipes((recipes) => [...recipes, res.data.data]); 时，您永远不会从 recipes 数组中删除数据，只会添加。您需要过滤数组，以删除未经检查的 ID。

Answer 2

试试这个，希望对你有帮助

export default function PostBulkActionButtons(props) {
const [recipes, setRecipes] = useState([]);
const ids = props.selectedIds;
useEffect(() => {
    ids.map((id) => {
        async function fetchData(id) {
            const res = await ajax.getMealPlan(id);
            const data = res.filter(i => i === recipes);
            setRecipes((recipes) => [...recipes, data]);
        }
        fetchData(id);
    });
}, [ids]);

return <div>{recipes}</div>;

如何取消选中 useEffect

How to uncheck with useEffect

javascript

reactjs

use-effect