React: 期望一个赋值或函数调用，但却看到了一个表达式

You are not returning anything, at least from your snippet and comment.

const def = (props) => { <div></div> };

This is not returning anything, you are wrapping the body of the arrow function with curly braces but there is no return value.

const def = (props) => { return (<div></div>); }; OR const def = (props) => <div></div>;

These two solutions on the other hand are returning a valid React component. Keep also in mind that inside your jsx (as mentioned by @Adam) you can't have if ... else ... but only ternary operators.

Possible way is (sure you can change array declaration to getting from db or another external resource):

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>
)
}

Expected an assignment or function call and instead saw an expression.

I had this similar error with this code:

const mapStateToProps = (state) => {
players: state
}

To correct all I needed to do was add parenthesis around the curved brackets

const mapStateToProps = (state) => ({
players: state
});

The return statements should place in one line. Or the other option is to remove the curly brackets that bound the HTML statement.

example:

return posts.map((post, index) =>
<div key={index}>
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
);

You use a function component:

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 the function component, you have to write a return or just add parentheses. After the added return or parentheses your code should look like this:

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 my case the problem was the line with default instructions 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;
}
}

Instead of

default: null;

The line

default: ;

worked for me.

Not sure about solutions but a temporary workaround is to ask eslint to ignore it by adding the following on top of the problem line.

// eslint-disable-next-line @typescript-eslint/no-unused-expressions

The fault is within your if statement. Had same error some time ago. I got to noticed that Within my ternary operator, I was having lines of code sepereted from each other by commas, changed to using if statement still was having same error.

I corrected it by sepereting the expressions and giving each a seperate if statement (works with ternary operator too) but in the end, I was having too many redundant codes...annoying. Have not found any solution since then

Firstly you must have at least one "return" before your parent div tag in your function as follows

const def = (props) => {
return(
<div>
[some other child div/codes here]
</div>
)
};

Or, you can use an Arrow function in a single line as:

const def = (props) => `<div> [some other child div/codes here] </div>`

In this case "return" is not compulsory.

Secondly, you should use "Conditional (ternary) Operator".

In my case the eslint error was caused by an unexpected use case. Hence the code was correct, but eslint failed:

cy.customCommand().then(obj => {
expect(obj.booleanProp).to.be.true;
});

eslint finds an expression which is generated, but not used. That the generation produces a result (potential exception) is beyond the analyzer.

In defense of eslint: I don't expect the analyzer to anticipate this side effect. And it's foremost usecase (prevent you from unfinished code-lines) is important. So nobody to blame..

I'd suggest to just disable the warning linewise like this:

cy.customCommand().then(obj => {
// eslint-disable-next-line no-unused-expressions
expect(obj.booleanProp).to.be.true;
});

Mostly this error occurs because we don't 'return' correctly. The most common solution to it is to put a pair of parenthesis () around your function's curly braces {}.

The following code will produce error. See there is no return.

const MyComponent= (state) => {
anything: state;
}

This is how you should write it correctly so that you don't see an error.

const MyComponent= (state) => ({
anything: state
});

This Error Happens If you Don't add return before statement.

In my case I was Using

str.charAt(0).toUpperCase() + str.slice(1);

which is Incorrect. We have to Add return before this statement.

Like This

return str.charAt(0).toUpperCase() + str.slice(1);

Hope this will Help You.