函数式组件useState setState值更新问题

Question

============================== 补充 ===============================
找到是什么影响到了

如果在严格模式下

ReactDOM.render(
  <React.StrictMode>
    <App />,
  </React.StrictMode>,
  document.getElementById('root')
);

如果直接修改state对象的引用，那么就会出现上面说的更新值不对的情况

setState((v) => {
        // 直接操作原对象
        v.age += 1;
        let b = { ...v, age: v.age };
        return b;
      });

如果不直接修改state对象的引用，则更新就没有问题

setState((v) => {
        // 这样就没有问题
        let { age } = v;
        let b = { ...v, age: age+1 };
        return b;
      });

如果在非严格模式下就没有这样的问题，那么根本原因是什么呢？？？？？

================原提问==============================

描述：通过useState创建状态，每一段时间进行更新
问题：页面显示结果变更为：1、2、4、6、8
期望：预想结果是1、2、3、4、5、6、7

预期与实际出现偏差的原因是什么？

代码如下

function App() {
  // const state = React.useContext(context);
  const [state2, setState] = useState(() => ({ age: 1 }));
  useEffect(() => {
    const id = setInterval(() => {
    // 主要在这里进行更新
      setState((v) => {
        console.log(v.age, 'sdf');
        v.age += 1;
        let b = { ...v, age: v.age };
        console.log(b, 'sdf2');
        return b;
      });
    }, 2000);
    return () => {
      clearInterval(id);
    };
  }, []);

  return (
    <div className="App">
      <div className="App-header">
        <div style={{ border: '1px solid green' }}>
          <span style={{ color: 'green' }}>根组件</span>获取context值为:
          <span style={{ color: 'red' }}>{state2.age}</span>
          <Title />
        </div>
      </div>
    </div>
  );
}

Answer 1

代码是好的 其他地方的问题吧

Answer 2

严格模式不能自动检测到你的副作用，但它可以帮助你发现它们，使它们更具确定性。通过故意重复调用以下函数来实现的该操作：
class 组件的 constructor，render 以及 shouldComponentUpdate 方法
class 组件的生命周期方法 getDerivedStateFromProps
函数组件体
状态更新函数 (即 setState 的第一个参数）
函数组件通过使用 useState，useMemo 或者 useReducer
https://react.docschina.org/d...

你这个写法不太好，hook推荐使用基本类型数据，复杂的数据也尽量拆分
这是我改完之后的

import { useState, useEffect } from "react";
export default function App() {
  // const state = React.useContext(context);
  const [age, setAge] = useState(1);
  useEffect(() => {
    const id = setTimeout(() => {
      // 主要在这里进行更新
      setAge(age + 1);
    }, 2000);
    return () => {
      clearInterval(id);
    };
  }, [age]);

  return (
    <div className="App">
      <div className="App-header">
        <div style={{ border: "1px solid green" }}>
          <span style={{ color: "green" }}>根组件</span>获取context值为:
          <span style={{ color: "red" }}>{age}</span>
        </div>
      </div>
    </div>
  );
}