React组件中使用Math.random在setState时渲染异常问题

我之前也碰到过类似的情况，结合你用的React 16、Next.js和styled-components技术栈，大概率是服务端渲染(SSR)和客户端渲染 hydration 不匹配，或者是随机数在组件渲染阶段重复生成导致的问题，咱们一步步来解决：

第一步：把随机逻辑移到useEffect（客户端仅执行） #

在React组件中，如果直接在render里用Math.random()，Next.js的服务端会生成一个随机值，客户端hydration的时候又会生成另一个，这就导致前后内容不匹配，控制台会出警告，而且展示的内容也会跳变。你需要把随机选取的逻辑放到useEffect里，确保只在客户端执行：

import { useState, useEffect } from 'react';
import styled from 'styled-components';

const TestimonialContainer = styled.div`/* 你的自定义样式 */`;

const Employees = () => {
  const [randomTestimonial, setRandomTestimonial] = useState(null);
  // 示例Testimonials列表，替换成你实际的数据
  const testimonials = [
    { id: 1, name: 'Alice', avatar: '/avatars/alice.jpg', content: '这家团队的服务超出预期！' },
    { id: 2, name: 'Bob', avatar: '/avatars/bob.jpg', content: '专业且高效，强烈推荐。' },
    { id: 3, name: 'Charlie', avatar: '/avatars/charlie.jpg', content: '合作非常愉快，下次还会再来。' }
  ];

  useEffect(() => {
    // 客户端加载完成后再生成随机索引，避免SSR与客户端渲染不匹配
    const randomIndex = Math.floor(Math.random() * testimonials.length);
    setRandomTestimonial(testimonials[randomIndex]);
  }, []); // 空依赖数组确保组件挂载后仅执行一次

  // 等待客户端生成随机项前，可显示加载态
  if (!randomTestimonial) return <div>Loading...</div>;

  return (
    <TestimonialContainer>
      <img src={randomTestimonial.avatar} alt={`${randomTestimonial.name}'s avatar`} />
      <h3>{randomTestimonial.name}</h3>
      <p>{randomTestimonial.content}</p>
    </TestimonialContainer>
  );
};

export default Employees;

第二步：确保Next.js中图片路径正确解析 #

如果你的图片存放在项目public目录下，上面的路径写法没问题；如果是本地导入的图片，要使用import方式引入，避免路径解析错误：

// 导入本地图片文件
import AliceAvatar from '../public/avatars/alice.jpg';

// 在Testimonials列表中使用导入的图片
const testimonials = [
  { id: 1, name: 'Alice', avatar: AliceAvatar, content: '这家团队的服务超出预期！' },
  // ...其他项
];

第三步：添加稳定的key（可选但推荐） #

虽然当前只渲染单个项，但给容器元素加上基于id的稳定key，能避免后续扩展时出现不必要的重渲染问题：

return (
  <TestimonialContainer key={randomTestimonial.id}>
    {/* 内容部分 */}
  </TestimonialContainer>
);

为什么用常量正常、用Math.random就出问题？ #

因为常量值在服务端和客户端渲染时完全一致，不会触发hydration不匹配的警告；而Math.random()在服务端和客户端会生成不同的随机值，Next.js检测到这种差异后会抛出警告，同时客户端会强制重新渲染，导致图片和关联信息显示异常。

如果控制台还有具体的警告信息，可以补充出来，不过按照上面的步骤调整后，应该能解决大部分问题啦！

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