React Native 组件属性已由回调更新，但未使用更新进行呈现

cs7cruho 于 2023-10-23 发布在 React

关注(0)|答案(2)|浏览(170)

我有一个模态组件，我试图更新的文件处理进展的进展。
在我的主应用组件中，我通过useState设置了progress变量，并定义了回调函数来更新它：

const [syncProgress, setSyncProgress] = useState(0.0)

type syncProgressCallback = (current: number, max: number) => void

const syncCallback : syncProgressCallback = function(current, max) {
    let progress = Math.floor((current / max) * 100)
    progress = Math.round(progress * 100 / 100)
    if(syncProgress != progress) console.log("syncCallback", `progress ${progress} (${current}/${max})`)
    setSyncProgress(progress)
}

将syncProgress发送到我的模态组件进行显示：

<MyModal syncProgress={syncProgress} />

在挂载时，我的应用会执行一个过程，迭代文件列表并一次处理一个内容：

for(let file of filesToProcess) {
    await SetupFile.processFile(file, true, syncCallback)
}

async function processFile(file: string, dropCurrent: boolean, callback: syncProgressCallback = null ) {
    let fileContents = ... // Read in the file as a string
    
    // Split file into array
    let array = fileContents.split(",")
    for(let i = 0; i < array.length; i++) {
        // process entry
        if(callback) callback(i, array.length)
    }
}

当处理开始时，我可以清楚地看到syncCallback接收信息：

...
 LOG  syncCallback progress 13 (5/37)
 LOG  syncCallback progress 16 (6/37)
 LOG  syncCallback progress 18 (7/37)
 LOG  syncCallback progress 21 (8/37)
 LOG  syncCallback progress 24 (9/37)
 LOG  syncCallback progress 27 (10/37)
 LOG  syncCallback progress 29 (11/37)
 LOG  syncCallback progress 32 (12/37)
 LOG  syncCallback progress 35 (13/37)
 LOG  syncCallback progress 37 (14/37)
 LOG  syncCallback progress 40 (15/37)
 LOG  syncCallback progress 43 (16/37)
 LOG  syncCallback progress 45 (17/37)
 LOG  syncCallback progress 48 (18/37)
 LOG  syncCallback progress 51 (19/37)
 LOG  syncCallback progress 54 (20/37)
 LOG  syncCallback progress 56 (21/37)
...

但是modal中的Text组件没有正确更新--它偶尔会在某个更新时 Flink ，但基本上保持静态。
我试过使用useRef，但没有成功。我也试过使用useCallback<syncCallBack>，直接传递更新，但没有成功。使用useEffect并依赖于syncProgress来更新progressText值似乎也无助于渲染频率。
这里有什么合适的方法来确保组件呈现回调接收的每个更新？

react-native

来源：https://stackoverflow.com/questions/77175821/component-prop-updated-by-callback-not-rendering-with-updates

2条答案

按热度按时间

4si2a6ki1#

使用requestAnimationFrame：

const syncCallback: syncProgressCallback = function(current, max) {
    let progress = Math.floor((current / max) * 100);
    progress = Math.round(progress * 100 / 100);
    if(syncProgress !== progress) {
        console.log("syncCallback", `progress ${progress} (${current}/${max})`);
        requestAnimationFrame(() => {
            setSyncProgress(progress);
        });
    }
}

强制重新渲染：

<MyModal key={syncProgress} syncProgress={syncProgress} />

赞(0）回复(0）举报 2023-10-23

rsl1atfo2#

import React, { useState, useEffect } from 'react';

function MyModal({ syncProgress }) {
  const [progress, setProgress] = useState(syncProgress);

  useEffect(() => {
    // Update the local state when syncProgress changes
    setProgress(syncProgress);
  }, [syncProgress]);

  return (
    <div>
      <p>Progress: {progress}%</p>
      {/* Render the rest of your modal */}
    </div>
  );
}

export default MyModal;

将syncProgress值传递给MyModal组件。

<MyModal syncProgress={syncProgress} />

赞(0）回复(0）举报 2023-10-23

我来回答

React Native 组件属性已由回调更新，但未使用更新进行呈现

2条答案

相关问题

热门标签

最新问答