Question

我正在尝试使用组件中的道具从 useEffect 中的状态变量中删除项目。我想从状态变量中获取初始值，然后删除该数组中的元素并再次将状态变量设置为新值。但是当我没有在依赖数组中传递状态变量时，它会以 React Hook useEffect has a missing dependency: 'abc'. Either include it or remove the dependency array 的形式抛出警告，当我传递它时，它进入无限循环，我认为这是正确的，因为 useEffect 工作。这是我正在尝试的 useffect：

const [abc, setAbc] = useState([]);

useEffect(() => {
    axios.get(url).then(res => setAbc(res));
}, [props.bbb])

useEffect(() => {
    if(props.xyz) {
         let aaa = abc.filter(key => key.id === props.xyz);
         setAbc(aaa);
    }
}, [props.xyz])

我在这里遗漏了什么吗？有没有更好的方法来做到这一点？

提前致谢。

Answer 1

正确，包括效果更新可能会导致渲染循环的依赖项。使用功能状态更新来消除将 export interface Low { data: DBLayout; read: () => Promise<void>; write: () => Promise<void>; } 作为依赖项的需要。

abc

由于第一个 useEffect(() => { if (props.xyz) { setAbc(abc => abc.filter(key => key.id === props.xyz)); } }, [props.xyz]); 实际上并没有引用 props，我可能会假设您打算只在 mount 上调用它。您可以通过使用一个空的依赖数组来做到这一点。

useEffect

更新

如果您想在每次 useEffect(() => { axios.get(url).then(res => setAbc(res)); }, []); 依赖项更新时获取 abc 并进行过滤，请使用单个 props.xyz 钩子并在更新状态之前过滤结果。

useEffect

使用 props 值删除 useEffect 钩子中状态数组元素中的元素

1 个答案:

更新