react设置style样式不更新问题

问题描述

如下所示,data数据来源于接口.但是请求到数据并用hooks保存之后样式一直不更新. 背景色和背景图片一直展示不出来.

    <div
      className={style.MailOfferLogin}
      style={{
        background: `${data?.homeBgColor || ''} url(${
          data?.loginBackgroundImgUrl
        }) no-repeat top center / 100%`
      }}
    />

而且f12看终端也是更新前的样式.控制台没有任何报错或者警告的提示.就给人一种状态变更但是style没被更新的感觉.

问题分析

1. 状态更新问题: 使用useMemo尝试得到结果之后,数据变了,但style还是不更新
2. 是不是被全局代码所影响: 回退到最初版本的代码任然无效
3. 样式语法本身有问题,style写法没有错但是背景色和背景图取的是接口数据,而接口数据不可信.把应该展示的样式打印出来才发现问题,如下

background: #61980 url(https://xxx.png) no-repeat top center / 100% no-repeat top center / 100%

取到的颜色值只有5位数!

总结

• 设置style时,如果style的语法有错误react是不会把错误的语法信息更新到节点上去的,也不会有任何的提示信息.