Erwartet einen Zuweisungs- oder Funktionsaufruffehler in ReactJS [Duplikat]

Question

Dies ist eigentlich eine Komponente, die ich in ReactJS implementieren möchte

Hier ist das Code-Snippet:

const Leaders=({leaders, isLoading, errMess})=>{
    if (isLoading) {
        return (
            <Loading />
        )
    }
    else if (errMess) {
        return (
            <h4>{errMess}</h4>
        )
    }
    else {
        return (
            leaders.map((leader) => {
                <Stagger in>
                    <Fade in>
                        <Media>
                            <Media object left src={baseUrl + leader.image} alt={leader.name} className='my-image mt-5'></Media>
                            <Media body className="ml-5 mt-0">
                                <Media heading>
                                    {leader.name}
                                </Media>
                                <p className='font-card'>{leader.designation}</p>
                                <p>{leader.description}</p>
                                <hr></hr>
                            </Media>
                        </Media>
                    </Fade>
                </Stagger>})
        )
    }
}

Aber ich bekomme eine Fehlermeldung: Expected an assignment or function call and instead saw an expressionim Rückgabeteil der else-Bedingung.

Eine Lösung zur Behebung dieses Problems wird sehr geschätzt

Answer 1

Es sieht so aus, als ob Ihre Kartenfunktion am Ende nichts zurückgibt, also müssen Sie Ihrem jsx return hinzufügen:

leaders.map((leader) => { return <Stagger in> ... // should add return

Answer 2

Wenn Sie eine geschweifte Klammer für eine Pfeilfunktion haben:

(leader) => {
  // ...
}

... dann ist jedes Element zwischen geschweiften Klammern eine Aussage . Sie haben eine Ausdrucksanweisung, die nichts bewirkt:

<Stagger in>...</Stagger>

Was Sie wollen, ist eine return- Anweisung, die das Ergebnis der Funktion wird. Andernfalls wird die Funktion implizit zurückgegeben undefined, und React gibt einen Fehler aus, wenn Sie versuchen, einen undefinedWert zu rendern :

return <Stagger in>...<Stagger>

... oder ändern Sie Ihre Pfeilfunktion so, dass keine geschweiften Klammern verwendet werden, damit Sie einen Ausdruck als Body haben und eine implizite return-Anweisung erstellen können:

(leader) => (
  <Stagger in>
    ...
  </Stagger>
)