useRef:呈现后状态变为未定义

Question

我使用ml5.js来训练ML模型。我必须添加图像到模型使用网络摄像头。列车功能与当前代码很好地工作。但是，当我试图在函数中的if 语句中设置一个状态时，当我尝试使用测试按钮测试时，它会抛出一个错误。

classifier的值变为undefined。

export const Component: React.FC<ComponentProps> = (props: ComponentProps) => {
    let classifier: any;
         classifier = featureExtractor.classification(capture, videoReady);
    }

    
    function final() {
        classifier.classify(capture, (error, result) => {
            setPrediction(label);
            
        });
    }

    return (<div>
            <Button variant="contained" color="primary" onClick={() => final()}>testing!</Button>
        </div>
    </div>)
        ;
};

classifier是一个变量，所以它每次都会重新呈现。useRef可以在这里使用，但我不知道怎么用。

const classifier = useRef()
classifier.current

像这样访问它仍然给了我错误。我也试图为分类器本身建立一个状态，但这似乎也不适用于我。

这是一个密码箱来试一试完整的东西。要查看错误，可以在列车函数的if set语句中设置状态：

https://codesandbox.io/s/hardcore-solomon-zb34l?file=/src/Component.tsx

Answer 1

我提供了一个分叉版本的Codesandbox，在上面的注释中提到过：https://codesandbox.io/s/frosty-sea-0pcfx?file=/src/Component.tsx。这包含了一些修复，但大多数修复都与更改capture和classifier的局部变量并将它们分配给refs有关。以下代码：

let capture: p5Types.Element;
let classifier: any;

改为：

let capture: any = useRef<any>();
let classifier: any = useRef<any>();

然后，代码的其他区域中所有对这些变量的引用都被转换为capture.current和classifier.current。它们也可能被存储在状态中，但是它们似乎只被赋值和使用在呈现过程中使用的数据之外，并且不需要组件在被分配时重新呈现。

Answer 2

我会这样做：

const { current: heap } = useRef({});

// In your `setup`
heap.classifier = featuresExtractor.classification(..);

// elsewhere access it as
heap.classifier

当你写到：

const classifier = useRef()
classifier.current

classifier.current在重呈现过程中是持久化的，但是您仍然需要在安装程序中将它标记为classifier.current = ...。我更喜欢我的写作方式，因为heap成为一个方便的地方，可以添加应该在重呈现中持久的任何其他内容。