显示保存在 useRef 变量中的值

Question

我有一个变量

const prediction = useRef<any>(null);

我单击了一个按钮，该按钮运行一个设置变量值的函数：

    function showResult() {
        classifier.current.classify(capture, (result) => {
            prediction.current = result[0].label
            console.log('prediction.current', prediction.current)

        });
    }

在控制台日志中，我看到 prediction.current 的正确值。但是，当我尝试在 JSX 中呈现它时，我什么也得不到。我可以做些什么来改变它？

如果我在 classifier.current.classifyfunction 中使用 setState，它会给我带来不同。这是一个 ml5 函数。有替代方法吗？我能以某种方式在函数之外设置状态吗？可以使用 Effect 吗？

    return (
    <div>
            <Button variant="contained" color="primary" onClick={() => gotResult()}>Test!</Button>
            <br />
            <span>Prediction: {prediction.current}</span><br />
        </div>
    </div>)

    //const [prediction, setPrediction] = useState<string>();
    //const [confidence, setConfidence] = useState<string>();
    //const [imageClassifier, setClassifier] = useState<any>();

    let capture: p5Types.Element;
    const classifier = useRef<any>(null);
    const prediction = useRef<any>(null);
    const confidence = useRef<any>(null);
    const setup = (p5: p5Types, canvasParentRef: Element) => {
        capture = p5.createCapture(p5.VIDEO).parent(canvasParentRef);
        const featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
        classifier.current = featureExtractor.classification(capture, videoReady);
        console.log('start', classifier);
    }

    function showResult() {
        console.log('classifier in results', classifier);
        classifier.current.classify(capture, (result) => {
            prediction.current = result[0].label;
            console.log(result[0].confidence); // Should output 'dog'

        });
    }

Answer 1

更改其 current 值的 ref 不会触发 React 组件中的任何重新渲染，但您应该能够替换上面的代码片段并触发重新渲染以查看最新值：

const prediction = useRef<any>(null);

变为：

const [prediction, setPrediction] = useState(null);

getResult 函数将如下所示：

function gotResult() {
    classifier.current.classify(capture, (err: any, result: any) => {
        setPrediction(result[0].label])
    });
}

最终效果图：

return (
    <div>
        <Button variant="contained" color="primary" onClick={() => gotResult()}>Test!</Button>
        <br />
        <span>Prediction: {prediction}</span><br />
    </div>
)

您的 classifier 正在为每个渲染设置 current 值。您可能只希望在 featureExtractor、capture 或 videoReady 发生变化时使用它。您可以使用 useMemo:

const classifier = useMemo(() => {
    return featureExtractor.classification(capture, videoReady);
}, [featureExtractor, capture, videoReady]);

useMemo 中的依赖数组将确保仅在这些变量发生变化时才定义分类器，而不是在每次渲染时都定义。

显示保存在 useRef 变量中的值

display value saved in useRef variable

javascript

typescript

reactjs

react-hooks

use-ref