React中如何调整useEffect执行顺序，使其优先于console.log(titleee)运行？

你碰到的顺序问题，是对React代码执行机制的认知偏差导致的，框架本身的执行顺序是固定的：

• 组件函数体内的所有同步代码，会在每次组件渲染的阶段从上到下同步执行，你写在顶层的const titleee = cPost.title、console.log(titleee)，会在第一次渲染的时候立刻跑完
• useEffect注册的回调函数，是等整个组件渲染完成、页面DOM更新完毕之后才会异步触发的，本身就天然晚于同层的同步代码执行
• 更别说useEffect内部的axios网络请求是异步的，拿到响应、更新状态的过程会更靠后，从机制上根本不可能在组件顶层的同步console之前跑完

另外你初始状态把cPost设为空数组，第一次渲染时读cPost.title本身就是undefined，甚至后续数据更新后直接读属性还可能触发类型报错。

不需要硬改框架的执行顺序，只要把依赖数据的逻辑放到正确的执行阶段，就能保证运行顺序符合预期：

• 把和获取到的post数据强相关的逻辑（读取title、打印日志），从组件顶层挪到能拿到数据的位置：
  1. 最直接的方式是在axios成功回调里，拿到响应数据后立刻执行你原本要跑的读值、打日志逻辑，不需要等setState触发重渲染再读状态
  2. 如果需要保持代码结构拆分，就把读title、打日志的逻辑写到独立的useEffect中，给这个effect加上cPost的依赖，等cPost状态更新后自动触发执行
• 修正初始state值：把cPost的初始值从空数组[]改成空对象{}，避免首次渲染读cPost.title时触发类型错误
• 补全useEffect的依赖项：把动态的postId加入依赖数组，避免路由切换参数时，数据拉取逻辑不重新触发

参考修改后的代码：

// 初始值改为空对象，和要存的单个post结构匹配
const [cPost, setCPost] = useState({});
const postId = id.match.params.id;

useEffect(() => {
  axios.get('http://localhost:5000/posts/'+postId)
    .then(posts => {
      setCPost(posts.data);
      console.log("test");
      // 拿到响应后直接执行原本的读值逻辑，保证顺序
      const titleee = posts.data.title;
      console.log(titleee);
    })
// 把动态路由参数加入依赖，逻辑更严谨
}, [postId]);

注意：React的hooks执行规则是固定的，没有任何配置项可以把useEffect的回调执行顺序提前到组件顶层同步代码之前，强行调整执行顺序反而会破坏hooks的执行规则，引发难以排查的报错。

内容的提问来源于stack exchange，提问作者gfiselv