Reactjs 反应物料ui SSR-警告：道具'd'不匹配。服务器：“M0 0小时24伏24小时0 Z”客户端：“M0 0h24v24H0z”

我正在一个带有服务器端渲染和材质ui的React站点上工作。一切都很好，包括mui JSS的东西

然后我从@materialui/icons添加了一个SVG图标

现在，Edge和IE11正在抱怨： 警告：道具d不匹配。服务器：M0 0小时24伏24小时0 Z客户端：M0 0h24v24H0z

警告表示服务器和客户端渲染不匹配，但如果使用curl进行服务器渲染，则该警告是正确的，并且不包括IE/Edge控制台中显示的空格

所有其他浏览器当然都可以

是否有其他人仅在MS浏览器中遇到SSR问题

这是我能得到的一个小例子。它基于材料ui主控/示例/ssr，删除了大部分内容：

server.js：

从快递进口快递； 从“React”导入React； 从“react dom/server”导入ReactDOMServer； 从“./App”导入应用程序； 函数renderFullPagehtml{ 返回` ${html} `; } 函数handleRenderreq，res{ //将组件渲染为字符串。 const html=ReactDOMServer.renderToString ; res.sendrenderFullPagehtml； } const-app=express； app.use'/build'，express.static'build'； //每次服务器端收到请求时，都会触发此操作。 app.usehandleRender； 常数端口=3000；

---

app.listenport 我也有类似的问题。SSR没有问题，但JSX中的条件呈现在服务器和客户机上条件不同

在本例中，我根据从localStorage读取的条件呈现了一些内容，该条件仅在客户端上定义。在服务器上，它返回未定义，因此客户端和服务器上呈现的内容不匹配

在我的例子中，解决方案是根据组件是否在客户端上呈现来有条件地呈现

我编写了以下自定义钩子：

import {useEffect, useState} from "react";

export const useLoaded = () => {
    const [loaded, setLoaded] = useState(false);
    useEffect(() => setLoaded(true), []);
    return loaded;
};

我这样使用它：

// in the functional component's body
const loaded = useLoaded();

// in the JSX
{localCondition && loaded &&
  <MyComponent />
}

---

对于类组件，您将使用componentDidMount生命周期方法和setState来代替。

因此这似乎是React中的一个bug。我在Material ui项目中记录了一个问题，导致React中出现此未解决问题：

警告似乎是善意的，随着Edge转向Chromium，我不再像以前那样担心了。

我也遇到了同样的问题…与服务器不匹配：。。。客户：。。。使用NextJS与Express.js服务器节点server.js进行反应

解决方案是仅在process.browser为true时渲染组件

---

你能发布足够的代码来重现问题吗？这也是我的假设。直到我意识到这只发生在微软浏览器上，它才为我工作！但现在我得到了这个错误：警告：预期服务器HTML中包含匹配的。

{
  process.browser ?
  <MyComponent /> :
  null
}