异步数据需在响应完成、状态更新、组件重渲染后使用；应通过Promise链、函数式setState、useEffect监听props、Context统一管理等方式确保时机正确和状态一致。

异步请求返回的数据不能直接赋值后立刻使用，因为请求还没完成，变量还是初始值。关键不是“怎么取数据”，而是“什么时候取才安全”——得等响应真正回来、状态更新完毕、组件完成重渲染之后。

用 Promise 链确保顺序执行

把后续依赖该数据的操作，明确写在 .then() 里，而不是放在请求语句后面。这样逻辑天然受控于异步完成时机。

• 错误写法：let data; uni.request({ ... }); console.log(data); // 此时 data 还是 undefined
• 正确写法：uni.request({...}).then(res => { data = res.data; doSomethingWith(data); })
• 多个请求有依赖？链式调用：.then(res1 => request2(res1.id)).then(res2 => ...)

函数组件中避免闭包 stale state

事件回调或定时器里读取的 state 可能是旧快照。不要在异步回调里直接用当前渲染周期的 state 变量。

• 问题场景：setCount(count + 1); setTimeout(() => console.log(count), 100); // 输出旧值
• 解法一（推荐）：用函数式更新，让 React 自动传入最新 prev 值：setCount(prev => { console.log('最新值', prev); return prev + 1; });
• 解法二：用 useRef 同步记录最新值，异步中读 ref.current：const countRef = useRef(count); useEffect(() => { countRef.current = count; }, [count]);

子组件需要实时响应父组件异步结果

别靠 props 默认值或初始化时读一次 props，要监听变化。React 中 props 更新会触发子组件重新渲染，只要子组件用的是最新 props，就自然拿到最新值。

• 错误做法：const [localData, setLocalData] = useState(props.asyncData); // 初始化后不再更新
• 正确做法：useEffect(() => { setLocalData(props.asyncData); }, [props.asyncData]);
• 更简洁：直接在 render 中使用 {props.asyncData?.name}，无需中间 state
• 复杂处理逻辑？加一层 useMemo 缓存计算结果：const processed = useMemo(() => transform(props.asyncData), [props.asyncData])

全局状态或跨层级通信时保持一致性

当多个组件共用同一份异步数据（比如用户信息），避免各自发请求或各自维护副本。

• 统一由顶层组件（如 App 或 Layout）发起请求并管理 loading / error / data 状态
• 通过 Context 提供数据和更新函数：const { user, updateUser } = useContext(UserContext)
• 配合 useReducer 或 Zustand 管理带副作用的状态流转，确保 dispatch 后所有订阅者同步收到新值