如何取消使用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>;
}

问题是当我取消选中某行时，配方仍包含未选中的行。我知道上面的代码在每个选择上都会生成重复的行，而我已经设法解决了！ 任何建议/解决方案将不胜感激！

谢谢！

Answer 1

尝试一下，希望对您有帮助

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>;

Answer 2

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