javascript - 我的 React 组件不会在 Safari 浏览器中更新

Question

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

父组件拥有所有的状态。我将 bets 对象传递给子组件，该子组件计算要传递给孙组件以显示的计数。

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

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

parent

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

child

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 中的计数，它显示正确的数字。有什么苹果/safari 特定于我缺少的 react 吗？

Answer 1

如果有变量被更改，您可以根据这些变量在样式之间切换(不透明度:1 或不透明度:0.99)，您可以尝试向未在 Safari/iOS 中更新的元素添加一个键。

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

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