useRef：渲染后状态变为未定义

Question

我正在使用 ml5.js 来训练 ML 模型。我必须使用网络摄像头将图像添加到模型中。 train 函数适用于当前代码。但是，当我尝试在 train 函数内的 if else 语句中设置状态时，当我尝试使用 test 它时会抛出错误测试按钮。

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

像这样访问它仍然给我错误。我还尝试为分类器本身设置一个状态，但这似乎对我也不起作用。

这里有一个 Codesandbox，可以尝试全部内容。查看错误可以在train函数的if else语句中设置一个状态：

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

Answer 1

我会做：

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 成为一个方便的地方来添加任何其他应该在重新渲染中持久存在的东西。

Answer 2

我提供了上面评论中提到的 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。这些也可能存储在状态中，但它们似乎只在渲染期间使用的数据之外分配和使用，并且不需要组件在分配时重新渲染。

useRef：渲染后状态变为未定义

useRef: state becomes undefined after rendering

javascript

typescript

reactjs

react-hooks

ml5.js