使用 props 值在 useEffect 挂钩中删除状态数组元素中的元素答案

【问题标题】：Delete elements in state array element in useEffect hook using props values使用 props 值在 useEffect 挂钩中删除状态数组元素中的元素
【发布时间】：2021-09-29 10:22:50
【问题描述】：

我正在尝试使用传递给组件的道具从 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])

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

提前致谢。

【问题讨论】：

你可以使用setAbc(currentAbc => currentAbc.filter(key => key.id === props.xyz))而不是提供abc作为依赖。
Curios，为什么你有两个 useEffect 具有相同依赖关系的钩子和更新相同的状态？你想赢下哪个并更新状态？
我假设两个useEffects 应该是一个，我正在阅读预期的逻辑“在更改 XYZ 重新加载完整列表然后基于 XYZ 过滤”需要更多信息才能确定.
@JacobSmit 我不反对，除了第一个似乎是挂载时更典型的获取数据，否则每次 xyz 属性更新时都运行这两个数据没有意义。第一个的承诺链将覆盖第二个所做的任何过滤，因为它是异步的。
嘿。实际上我在这里错误地添加了相同的变量。更新了代码。两种使用效果有不同的依赖关系。

标签： reactjs react-hooks use-effect use-state

【解决方案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));
}, []);

更新

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

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

【讨论】：

谢谢。使用像 setAbc(abc => abc.filter(key => key.id === props.xyz)) 这样的 abc 有效。