我的 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 中的計數，它顯示了正確的數字。 有什么蘋果/野生動物園特有的反應我失蹤了嗎？

Answer 1

如果有變量正在更改，您可以根據這些變量在樣式之間切換（不透明度：1 或不透明度：0.99）您可以嘗試向 Safari/iOS 中未更新的元素添加鍵。

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

我遇到了同樣的問題，這似乎暫時有效。

Answer 2

所以幾天后我確實解決了這個非常奇怪的問題。

發生的事情是我猜 Safari 瀏覽器中的引擎沒有正確重新渲染小徽章圖標。 我會打印出 DOM 內部的值，在我使用的樣式徽章的外部，並且數字會按預期更新......讓我相信這個問題與樣式有關。

然后在刪除了我認為是導致問題的 CSS 之后，我注意到 safari 看起來像是在“部分”更新徽章中的值。 它似乎已經重新渲染了一半，並且之前的數字與新值沖突......不確定這是否是渲染引擎的一些模糊問題？

在一個一個地添加和刪除所有 CSS 之后，問題仍然存在，所以我決定通過一個簡單的計算來欺騙瀏覽器來“強制”渲染它被渲染的孫子：

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

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

不是一個很好的解決方案，但哦，我想它已經修復了。 哈

Answer 3

我只是遇到了類似的問題。 Safari 沒有重新渲染一些實現為的文本：

<span>{someValue}</span>

在“someValue”字段更新時，reactJS 工作正常（請求渲染元素）但 Safari 僅重新渲染新值區域（比以前短）。 用戶界面故障：-/

如果我通過開發者工具對 CSS 做了任何事情，元素已經再次渲染並且看起來很好：-/

經過一些嘗試，我幸運地使用了“顯示：塊；” style 屬性，它開始重新渲染絕對沒問題。 還有“顯示：內聯塊；” 如果需要使用它，也將解決該問題。

Answer 4

我有一個類似的問題，在 Safari 中使用 div 內的 flexbox 的中心定位跨度沒有正確更新。

重新設計這個 div 以使用 display:block 解決了這個渲染問題，所以如果將來有人遇到同樣的問題，這可能值得研究。

PS 現在查看樣式代碼，進行更改實際上是一個更清潔的解決方案，因為它將行數從 4 減少到 1，但當然並非所有場景都如此。

前：

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

之后：（是一個 div，所以 display:block 已被使用）

text-align: center;

Answer 5

使用map函數時， React會查看鍵：
識別哪些項目已更改、添加或刪除。

解決方案：

• 現在，當您使用地圖功能時，您必須將鍵添加到地圖內部的 div 中。
• 使用與點擊背后的邏輯相關聯的 key 變量，這樣當點擊 key 時，變量會更新，因此 React 將重新渲染這個孫 div。 如以下代碼：
  <div key={Count} className={'myComponent'}>{Count}</div>

PS：我不鼓勵使用 Date 作為鍵，因為我快速點擊它會出現故障，而如果你將它與點擊背后的邏輯連接到一個狀態，它不會。

Answer 6

這可能會幫助您：

will-change：變換；

Answer 7

我知道可能已經晚了，但是幫助我使用 Safari 不重新渲染重用組件的是：

will-change：不透明度；

您可能必須嘗試將其應用於 HTML 層次結構中的哪個元素。 這是沒有意義的，因為在我的情況下沒有改變不透明度，但它確實解決了問題。 謝謝你，蘋果...

Answer 8

我們也遇到了這個問題。 所以，我對它做了一個簡短的研究，得到的要點如下：

1. 它通過為元素提供唯一鍵來工作（key={new Date()} 工作 bcz 是唯一的，即使是秒），它沒有正確地重新呈現描述作為其中的文本，通過按鈕或事件更改。

2. 所以我基本上得到了一個要點，提供單獨的鍵使新的 dom 元素在協調過程中做出反應，而不是在元素內更改相同的值，所以基本上顯示對象的元素是唯一的，而不是在該 dom 元素內更改值所以我認為safari 特定於它，因為它動態地保持元素渲染的狀態。 因此，在提供關鍵道具之后，您基本上是在渲染獨特的不同元素（顯然其中包含不同的文本/對象）。 當我們在 React 組件中渲染列表時，這基本上利用了鍵的概念。