当我调用useState钩子时，重新渲染React组件

Question

当我在image.onload()内部调用useState()钩子时，我在重新渲染React组件时遇到了问题。我希望在调用setClassificationResult后重新渲染组件一次，但由于某种原因，它一直在重新渲染，就像我有一个无限循环一样。这是我的代码：

const ImageClassification = React.memo(function() {
const [isModelLoaded, setModelLoaded] = useState(false);
const [uploadedFile, setUploadedFile] = useState();
const [classifier, setClassifier] = useState();
const [classificationResult, setClassificationResult] = useState();
useEffect(() => {
async function modelReady() {
setClassifier(
await MobileNet.load().then(model => {
setModelLoaded(true);
return model;
})
);
}
modelReady();
}, []);
function onDrop(acceptedFiles: File[]) {
setUploadedFile(acceptedFiles);
}
function prepareImage(inputFile: File) {
const image = new Image();
let fr = new FileReader();
fr.onload = function() {
if (fr !== null && typeof fr.result == "string") {
image.src = fr.result;
}
};
fr.readAsDataURL(inputFile);
image.onload = async function() {
const tensor: Tensor = tf.browser.fromPixels(image);
classifier.classify(tensor).then((result: any) => {
// Crazy re-rendering happens when I call this hook.
setClassificationResult(result);
console.log(result);
});
console.log("Tensor" + tensor);
};
}
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<React.Fragment>
{!isModelLoaded ? (
<CircularProgress />
) : (
<div {...getRootProps()}>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here.. </p>
) : (
<p>Drag 'n' drop some files here, or click to select files</p>
)}
{uploadedFile &&
uploadedFile.map((item: File) => {
prepareImage(item);
return classificationResult
? classificationResult.map((result: any) => {
return (
<ClassificationResult
className={result.className}
probability={result.probability}
/>
);
})
: null;
})}
</div>
)}
</React.Fragment>
);
});
export default ImageClassification;

你知道如何避免这种疯狂的重新渲染吗？

Answer 1

组件存在生命周期问题，因为它从returnhtml值调用prepareImage(item)。这意味着你将在每次渲染时调用这个函数，这就是为什么它会创建一些无限循环疯狂的重新渲染。

您需要重新思考您的算法，并将其移动到更好的位置。一个好的解决方案是只准备映像onDrop event，因此只进行一次。

function onDrop(acceptedFiles: File[]) {
setUploadedFile(acceptedFiles);
acceptedFiles.forEach(file => {
prepareImage(file);
});
}

然后可能将图像的数组存储在状态中，该数组应该被丢弃并准备好😉.