在 React 中直接对 Array.map 的回调函数使用 async/await 会导致返回 Promise 对象，而 React 无法渲染 Promise，从而抛出“Objects are not valid as a React child”错误；正确做法是将异步逻辑封装进独立组件，并利用 useEffect + useState 管理异步状态。
在
react
中直接对 `array.map` 的回调函数使用 `async/await` 会导致返回 promise 对象，而 react 无法渲染 promise，从而抛出“objects are not valid as a react child”错误；正确做法是将异步逻辑封装进独立组件，并利用 `useeffect` + `usestate` 管理异步状态。
React 的 map 方法期望每个元素返回一个
同步渲染的 React 元素（JSX）
，而非 Promise。当你写成 messages.map(async (msg) => { ... }) 时，JavaScript 会自动将该回调包装为 async function，其返回值必然是 Promise —— 而
父组件则保持简洁、纯同步的 map：
⚠️ 关键注意事项
key 不可省略
：确保每个
{promise}
是非法的，React 在 reconciler 阶段会立即报错：
Objects are not valid as a React child (found: [object Promise]).
✅ 正确解法：职责分离 + 副作用托管
核心原则是：
渲染逻辑必须同步，异步数据获取必须移出 map 回调，交由子组件自身管理
。
推荐创建一个受控的 Message 组件，内部用 useState 存储预览图 URL，用 useEffect 触发并响应 mediaId 变化：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
import { useState, useEffect } from 'react';
function Message({ message }: { message: MessageType }) {
const [previewImage, setPreviewImage] = useState(undefined);
// 仅当 message.mediaId 变化时触发预览图获取
useEffect(() => {
if (!message.mediaId) {
setPreviewImage(undefined);
return;
}
let isMounted = true; // 防止内存泄漏与状态竞态
storage.getFilePreview(Constants.BUCKET_ID, message.mediaId)
.then((url) => {
if (isMounted) {
setPreviewImage(url);
}
})
.catch((err) => {
console.warn('Failed to load preview image:', err);
if (isMounted) {
setPreviewImage(undefined);
}
});
return () => {
isMounted = false;
};
}, [message.mediaId]); // 依赖项必须精确，避免重复请求或 stale closure
// 同步渲染分支逻辑（系统消息 / 我的消息 / 对方消息）
if (message.type === 'system') {
return {message.text};
}
if (message.isMine) {
return (
{message.text}
{previewImage && }
);
}
return (
{message.text}
{previewImage && }
);
} function MessageList({ messages }: { messages: MessageType[] }) {
return (
{messages.map((msg) => (