Reageren: verwachtte een toewijzing of functieaanroep en zag in plaats daarvan een uitdrukking

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.

Other episodes