使用道具值删除 useEffect 挂钩中状态数组元素中的元素

Question

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

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

正确，包括效果更新可能导致渲染循环的依赖项。使用功能状态更新来消除 abc 作为依赖项的需要。

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

因为第一个 useEffect 实际上并没有引用道具，我可能会假设你打算只在挂载时调用它。您可以使用空的依赖项数组来执行此操作。

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

更新

如果您想要获取 abc 并在每次 props.xyz 依赖项更新时进行过滤，则使用单个 useEffect 挂钩并在更新状态之前过滤结果。

useEffect(() => {
  axios.get(url)
    .then(res => {
      if (props.xyz) {
        setAbc(res.filter(key => key.id === props.xyz));
      } else {
        setAbc(res);
      }
    });
}, [props.xyz]);

使用道具值删除 useEffect 挂钩中状态数组元素中的元素

Delete elements in state array element in useEffect hook using props values

reactjs

react-hooks

use-effect

use-state

更新