React 18.2中使用map循环渲染HTML内容不显示问题求助

1. 确认组件传参是否正确 #

首先检查父组件中是否正确将自定义Hook返回的数组传递给Conversations组件，变量名是否与组件props定义一致：

// 父组件示例
import Conversations from './Conversations';
import { useConversations } from './useConversations';

const App = () => {
  const conversations = useConversations();
  // 可临时替换为静态数据测试：const conversations = conversationsData;
  console.log('传递给组件的数组:', conversations); // 验证数据是否正确

  return <Conversations conversations={conversations} />;
};

如果传参时变量名拼写错误（比如写成conversation而非conversations），组件会接收到undefined，触发PropTypes必填警告，控制台会显示相关错误。

2. 检查自定义Hook的状态更新逻辑 #

确保Hook中正确使用React状态更新方法，禁止直接修改原数组（React依赖数组引用变化触发重渲染）：

错误示例（不会触发重渲染）： #

const useConversations = () => {
  const [conversations, setConversations] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch('/api/conversations').then(res => res.json());
      conversations.push(...data); // 直接修改原数组，React无法感知
    };
    fetchData();
  }, []);

  return conversations;
};

正确示例： #

const useConversations = () => {
  const [conversations, setConversations] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch('/api/conversations').then(res => res.json());
      setConversations(data); // 传入新数组，触发重渲染
      // 或合并现有数据：setConversations(prev => [...prev, ...data])
    };
    fetchData();
  }, []);

  return conversations;
};

3. 验证数组数据是否符合PropTypes定义 #

打开浏览器控制台，检查是否有PropTypes警告。如果自定义Hook返回的数组中存在字段缺失（比如id或name未定义），PropTypes会抛出警告，可能导致组件渲染异常。

4. 检查React StrictMode的影响 #

React 18的StrictMode会使useEffect执行两次，若Hook中的异步逻辑未处理重复请求，可能导致数据被意外重置。可临时移除index.js中的<StrictMode>标签测试：

// 原代码
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后测试
root.render(<App />);

5. 优化列表key（非直接原因，但避免潜在问题） #

虽然用index作为key不会导致不渲染，但数组有增删改时可能引发性能问题或渲染异常，建议使用唯一标识id：

<li key={conversation.id}>{conversation.name}</li>

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