Ik probeer deze lintfout op regel const def = (props) => {
in de volgende voorbeeldcode.
const propTypes = {
prop1: PropTypes.string,
prop2: PropTypes.string,
prop3: PropTypes.string,
prop4: PropTypes.string,
prop5: PropTypes.string,
}
const abc = (props) => {
some code here }
const def = (props) => {
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>
<div ...>
<someComponent
do something
/>
if (some condition) {
do this
} else {
do that
}
</div>
};
Enig idee waarom ik deze pluisfout krijg?
Antwoord 1, autoriteit 100%
Je retourneert niets, tenminste niet van je fragment en commentaar.
const def = (props) => { <div></div> };
Dit retourneert niets, je wikkelt de hoofdtekst van de pijlfunctie met accolades, maar er is geen retourwaarde.
const def = (props) => { return (<div></div>); };
OF
const def = (props) => <div></div>;
Deze twee oplossingen daarentegen retourneren een geldige React-component. Houd er ook rekening mee dat je in je jsx
(zoals vermeld door @Adam) geen if ... else ...
kunt hebben, maar alleen ternaire operators.
Antwoord 2, autoriteit 24%
Verwachtte een toewijzing of functieaanroep en zag in plaats daarvan een uitdrukking.
Ik had dezelfde fout met deze code:
const mapStateToProps = (state) => {
players: state
}
Om te corrigeren hoefde ik alleen maar haakjes rond de gebogen haakjes toe te voegen
const mapStateToProps = (state) => ({
players: state
});
Antwoord 3, autoriteit 11%
De return-statements moeten op één regel worden geplaatst.
Of
de andere optie is om de accolades te verwijderen die het HTML-statement omsluiten.
voorbeeld:
return posts.map((post, index) =>
<div key={index}>
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
);
Antwoord 4, autoriteit 11%
Je moet iets retourneren
in plaats van dit (dit is niet de juiste manier)
const def = (props) => { <div></div> };
probeer
const def = (props) => ( <div></div> );
of gebruik een return-statement
const def = (props) => { return <div></div> };
Antwoord 5, autoriteit 3%
Mogelijke manier is (u kunt de array-declaratie zeker wijzigen in ophalen van db of een andere externe bron):
const MyPosts = () => {
let postsRawData = [
{ id: 1, text: 'Post 1', likesCount: '1' },
{ id: 2, text: 'Post 2', likesCount: '231' },
{ id: 3, text: 'Post 3', likesCount: '547' }
];
const postsItems = []
for (const [key, value] of postsRawData.entries()) {
postsItems.push(<Post text={value.text} likesCount={value.likesCount} />)
}
return (
<div className={css.posts}>Posts:
{postsItems}
</div>
)
}
Antwoord 6
U gebruikt een functiecomponent:
const def = (props) => {
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>
<div ...>
<someComponent
do something
/>
if (some condition) {
do this
} else {
do that
}
</div>
};
In de functiecomponent moet u een terugkeer schrijven of haakjes toevoegen. Na de toegevoegde rendement of haakjes moet uw code er als volgt uitzien:
const def = (props) => ({
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>
<div ...>
<someComponent
do something
/>
if (some condition) {
do this
} else {
do that
}
</div>
});
Antwoord 7
Niet zeker van oplossingen, maar een tijdelijk Workaround is om de eSlint te vragen om het te negeren door het volgende bovenop de probleemlijn toe te voegen.
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
Antwoord 8
In mijn geval was het probleem de lijn met Standaard Instructies in Switch Block:
handlePageChange = ({ btnType}) => {
let { page } = this.state;
switch (btnType) {
case 'next':
this.updatePage(page + 1);
break;
case 'prev':
this.updatePage(page - 1);
break;
default: null;
}
}
In plaats van
default: null;
De lijn
default: ;
werkte voor mij.
Antwoord 9
De fout zit in je if-statement. Had enige tijd geleden dezelfde fout. Ik merkte dat ik binnen mijn ternaire operator coderegels had die van elkaar gescheiden waren door komma’s, veranderd in het gebruik van if-statement had nog steeds dezelfde fout.
Ik heb het gecorrigeerd door de expressies te scheiden en elk een aparte if-statement te geven (werkt ook met de ternaire operator), maar uiteindelijk had ik te veel overbodige codes…vervelend. Sindsdien geen oplossing gevonden
Antwoord 10
Ten eerste moet u als volgt ten minste één “return” voor uw bovenliggende div-tag in uw functie hebben
const def = (props) => {
return(
<div>
[some other child div/codes here]
</div>
)
};
Of je kunt een Pijl-functie in een enkele regel gebruiken als:
const def = (props) => `<div> [some other child div/codes here] </div>`
In dit geval is "return"
niet verplicht.
Ten tweede moet u “Voorwaardelijke (ternaire) operator” gebruiken.