我的 React 组件在 Safari 浏览器中未更新

Question

以为一切都很顺利。在 Chrome、FF、Edge，甚至 IE 11 中完美运行！

父组件保存所有的状态。我将bets 对象传递给子组件，该子组件计算一个计数并传递给孙组件进行显示。

父状态“bets”是一个对象，其中键作为 ID，值作为对象。

当我与应用程序交互时，父状态会正确更改。为什么当父状态改变时只有 Safari 不会更新？（在 iOS 和 MacOS 上）

家长

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bets: {}
        };
    }
}

孩子

getBadgeCount = (league) => {
    const bets = this.props.bets;
    let count = 0;
    Object.keys(bets).map((bet) => bets[bet].event.league === league && count++);
    return count;
};

// ...

<ChildItem count={this.getBadgeCount(league)} />

孙子

class GrandChildComponent extends React.Component {
    render() {
        const { count } = this.props;
        return (
            <div>
                <div>
                    {count > 0 && <div>{count}</div>}
                </div>
            </div>
        );
    }
}

我console.log计算了孙子渲染和 componentDidUpdate 中的计数，它显示了正确的数字。我缺少一些与 React 相关的苹果/Safari 特有的东西吗？

Answer 1

所以几天后我确实解决了这个非常奇怪的问题。

发生的情况是我猜 Safari 浏览器中的引擎没有正确重新渲染小徽章图标。我会打印出 DOM 内部、我正在使用的样式徽章外部的值，并且数字会按预期更新......让我相信问题与样式有关。

然后，在删除我认为是导致问题的 CSS 内容后，我注意到 safari 似乎“部分”更新了徽章中的值。它似乎已经重新渲染了一半，并且之前的数字与新值发生冲突...不确定这是否是渲染引擎的一些模糊问题？

在一一添加和删除所有 CSS 后，问题仍然存在，因此我决定通过在渲染的孙子内部进行简单的计算来欺骗浏览器“强制”渲染：

const safariRenderHack = { opacity: count % 2 ? 1 : 0.99 };

<div style={safariRenderHack}>{count}</div>

这不是一个很好的解决方案，但是哦，我想它已经解决了。哈

Answer 2

如果根据您可以在样式之间切换的变量进行更改（不透明度：1 或不透明度：0.99），您可以尝试向未在 Safari/iOS 中更新的元素添加一个键。

<div key={new Date()} className={'myComponent'}>{Count}</div>

我遇到了同样的问题，这似乎暂时有效。