Question

认为一切进展顺利。在Chrome，FF，Edge甚至IE 11中都能完美运行！

父级组件保留所有状态。我将下注对象传递给子组件，该子组件计算要传递给孙子组件进行显示的计数。

父状态“ 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)} />

GrandChild

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

我console.log在子代渲染器内部和componentDidUpdate中计数，并显示正确的数字。我想念的苹果/野生动物园有什么反应吗？

Answer 1

我遇到了类似的问题，即在div中使用flexbox的中心定位范围在Safari中无法正确更新。

重新设置此div的样式以使用display：block解决了此渲染问题，因此将来是否有人遇到相同的问题可能值得研究。

P.S。现在看样式代码，进行更改实际上是一种更简洁的解决方案，因为它将行数从4条减少到1条，但是当然并非在所有情况下都是如此。

之前：

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

之后：（是div，因此已经使用了display：block）

text-align: center;

Answer 2

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

发生了什么事，我猜想Safari浏览器中的引擎未正确重新渲染小徽章图标。我会在DOM内打印出我正在使用的样式标记之外的值，并且该数字会按预期更新...使我相信问题与样式有关。

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

一个接一个地添加和删除所有CSS之后，问题仍然存在，所以我决定诱使浏览器通过在要渲染的孙子内部进行简单的计算来“强制”渲染：

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

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

这不是一个很好的解决方案，但是我猜它是固定的。哈

Answer 3

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

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

我遇到了同样的问题，这似乎现在可行。

Answer 4

我刚遇到类似的问题。 Safari并未重新渲染一些实现为以下内容的文本：

<span>{someValue}</span>

在“ someValue”字段更新中，reactJS正常工作（要求渲染元素），但Safari仅重新渲染新值的区域（比以前的区域短）。 UI故障：-/

如果我通过开发人员工具对CSS进行了任何处理，则元素已再次呈现并看起来不错：-/

经过一些尝试，幸运的是，我使用了'display：block;'样式属性，它开始重新呈现完全正确。另外，如果需要使用'display：inline-block;'也可以解决该问题。

Answer 5

这可能会帮助您：

意志改变：转变；

Answer 6

当使用 map 函数时，React 查看键：
识别哪些项目已更改、添加或删除。

解决方案：

现在，当您使用地图功能时，您必须添加键到地图内的div。
使用一个关键变量，该变量连接到 click 背后的逻辑，这样当点击 key 时，变量会更新，因此 React 将重新渲染这个孙子 div 。如下代码：
<div key={Count} className={'myComponent'}>{Count}</div>

PS：我不鼓励使用日期作为键，因为我快速点击它会出现故障，而如果你将它与具有点击背后逻辑的状态连接起来，它不会。

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

6 个答案: