使用 redux 的 useSelector 和 react 的 useEffect，但即使我更新值，该值也不会改变

Question

有两个组件，我以为它们的效果是一样的！然而，它们不是！对于第一个代码，我有一个 var n，我使用 redux 中的 useSelector 增加了 n，我可以看到 n 在选择器工作时被改变。但是return里面还是显示不变的n，我也是用useEffect，如果n变了，就更新组件。但还是不行。但是，第二个代码是有效的。第二个代码我也使用 useSlector 来 return n，这就是工作。为什么第一个代码不起作用，即使我使用了 useEffect？？？

我的问题 在我的第一个代码中，我在useSeletor中不断更新n，我认为n[的状态=40=]改变了，会触发useEffect()（useEffect订阅了[n]）更新组件，但它似乎不是。为什么会这样，我已经用useEffect订阅了n，难道你做的每一个改变都不更新组件吗？

//第一个代码

const TotalCompleteItems = () => {
  let n = 0
  let [state, setState] = useState
  useSelector(state => {
    n=0
    state.todos.forEach(element => {
        (element.completed===true) && (n++);
        console.log(n)
    })
 })
 useEffect(() => { 
 },[n])

 return <h4 className='mt-3'>Total Complete Items: {n}</h4>;
};                                                                                       
export default TotalCompleteItems;

//第二个代码

const TotalCompleteItems = () => {                                                          
    let n = useSelector(state => {
    let num=0
    state.todos.forEach(element => {
        (element.completed===true) && num++;
    })
    return num
}
)

return <h4 className='mt-3'>Total Complete Items: { n }</h4> };                          
export default TotalCompleteItems;

Answer 1

My Question In my first code, I kept updating n in useSeletor, I thought that the state of n changed, it would trigger useEffect() (useEffect subscribed to [n]) to update the component, but it doesn't seem to be. Why is this happening, I have subscribed to n with useEffect, doesn't every change you make update the component?

这有点狗摇尾巴的意思。您正在改变 n，但简单地改变 n 不足以触发组件重新渲染并在渲染周期结束时调用 useEffect 挂钩以检查是否有任何依赖项更新。无论如何这也行不通，因为 n 总是在渲染周期开始时重新声明。

如果您只想计算总的完成值，则只需在 todos 数组上使用 array.reduce 并 return 计算计数。

const TotalCompleteItems = () => {                                                          
  const n = useSelector(state => {
    return state.todos.reduce(
      (total, todo) => total + Number(!!todo.completed),
      0
    );
  });

  return <h4 className='mt-3'>Total Complete Items: {n}</h4>;
};

或更简单地在 todos 数组和 return 长度上使用 array.filter。

const TotalCompleteItems = () => {                                                          
  const n = useSelector(state => {
    return state.todos.filter(todo => todo.completed).length;
  });

  return <h4 className='mt-3'>Total Complete Items: {n}</h4>;
};