从此表达式中提取"numberImg"赋值。sonarlint(Javascript：S1121)

Question

import React, { useState } from "react";
import arrowRight from "../images/arrowRight.svg";

function Slider({ images }) {
let [showPicture, setShowPicture] = useState(0);
let numberImg = images.length;
const imgPrevious = () => {
if (showPicture === 0) {
setShowPicture(numberImg - 1);
} else {
setShowPicture(showPicture - 1);
}
return (setShowPicture);
};
const imgNext = () => {
if (showPicture === numberImg - 1) {
setShowPicture(numberImg = 0); // the problem is here
} else {
setShowPicture(showPicture + 1);
}
return (setShowPicture);
};
return (
<div className="carrousel">
{
numberImg > 1 && <img className="arrow arrow-left" src={arrowRight} alt="previous" onClick={imgPrevious} />
}
{
images.map((image, index) => {
return (
<img key={index} className={index === showPicture ? 'carrousel-img actif' : 'carrousel-img'} src={image} alt="Lodging" />
)
})
}
{
numberImg > 1 && <img className="arrow arrow-right" src={arrowRight} alt="next" onClick={imgNext} />
}
</div>
);
}
export default Slider;

你好,我对"sonarlint"有个小问题。(见标题)问题在于"numberImg =0"在imgNext函数中

我现在正在制作一个滑块

这个工作得很好，但是我想知道为什么sonarlint告诉我一个关于等式的问题

有什么想法吗?感谢你。

Answer 1

提取"numberImg"从这个表达式

这很简单，没有任何歧义:

// Change this
setShowPicture(numberImg = 0);
// to this
numberImg = 0;
setShowPicture(numberImg);

Answer 2

我很想知道为什么sonarlint告诉我一个关于相等的问题

setShowPicture(numberImg = 0);

这不是一个等式。这是一个作业。代码质量工具不喜欢在函数调用内部进行赋值。它不是很好读，你可能会把赋值误认为比较。

用SonarSource自己的话来说:

子表达式中的赋值很难发现，因此使代码可读性降低。理想情况下，子表达式不应该有副作用。

SonarLint想让你写:

numberImg = 0;
setShowPicture(numberImg);