反应：期望一个赋值或函数调用，而是看到一个表达式答案

【问题标题】：React: Expected an assignment or function call and instead saw an expression反应：期望一个赋值或函数调用，而是看到一个表达式
【发布时间】：2018-01-16 07:35:21
【问题描述】：

我正在尝试在以下示例代码中的 const def = (props) => { 行修复此 lint 错误。

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>

};

知道为什么我会收到此 lint 错误吗？

【问题讨论】：

那行没有问题。这是在你得到 HTML 而不是 JS 之后的那一行。
你不能在 jsx 中拥有和if。您需要使用condition ? if true : if false 语法。
即使我只是执行const def = (props) => { <div> </div> };，我也会遇到同样的 lint 错误

标签： reactjs jsx

【解决方案1】：

你没有返回任何东西，至少从你的 sn-p 和评论中。

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

这没有返回任何东西，你用花括号包裹了箭头函数的主体，但没有返回值。

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

另一方面，这两种解决方案都返回了一个有效的 React 组件。还要记住，在您的jsx（如@Adam 提到的）中，您不能有if ... else ...，而只能有三元运算符。

【讨论】：

谢谢。如果我这样做onst def = (props) => <div></div>; 我得到错误Unexpected parentheses around single function argument having a body with no curly braces 如果我这样做const def = (props) => { return (<div></div>); }; 我得到错误Unexpected block statement surrounding arrow body
那就试试const def = props => (<div></div>);
再次感谢。这样它就不会显示错误，但我得到PropName is missing in props validation 里面的所有专业人士。知道为什么吗？
是的，您需要在道具验证中添加您在组件中使用的每个道具。您可能想查看文档，您似乎缺少 React 的许多关键基础知识。 facebook.github.io/react/docs/typechecking-with-proptypes.html
将return 添加到<Redirect to='/home'> 解决了我的问题

【解决方案2】：

期待一个赋值或函数调用，但看到的是一个表达式。

我在这段代码中遇到了类似的错误：

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

为了更正我需要做的就是在弯括号周围添加括号

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

【讨论】：

这样做的原因是什么？
我遇到了同样的情况。如果你加上括号，我无法解释为什么它会起作用。
你节省了我的时间，@Steven。谢谢！
@NisanAbeywickrama ，括号用于返回对象，而不是这样做： const mapStateToProps = (state) => { return { player: state } };
我什至想知道为什么这个括号 bcz 胖箭头函数应该是 ()=>{ 多行表达式 } 而不是 ()=({ 多行表达式 })

【解决方案3】：

你必须返回一些东西

而不是这个（这不是正确的方式）

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

试试

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

或者使用return语句

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

【讨论】：

【解决方案4】：

return 语句应该放在一行中。要么另一种选择是删除绑定 HTML 语句的大括号。

示例：

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

【讨论】：

这对我有用。我收到了同样的消息，因为我有一个 .map 并且我使用 {} 而不是 () 来返回组件/jsx 谢谢！

【解决方案5】：

可能的方式是（确保您可以将数组声明更改为从数据库或其他外部资源获取）：

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

【讨论】：

【解决方案6】：

你使用了一个函数组件：

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>

};

在函数组件中，你必须写一个返回或者只是添加括号。添加返回或括号后，您的代码应如下所示：

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

【讨论】：

【解决方案7】：

不确定解决方案，但临时解决方法是通过在问题行顶部添加以下内容来要求 eslint 忽略它。

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

【讨论】：

【解决方案8】：

在我的情况下，问题在于开关块中的 default 指令行：

  handlePageChange = ({ btnType}) => {
    let { page } = this.state;
    switch (btnType) {
      case 'next':
        this.updatePage(page + 1);
        break;
      case 'prev':
        this.updatePage(page - 1);
        break;
      default: null;
    } 
  }

代替

default: null;

线

default: ;

为我工作。

【讨论】：

【解决方案9】：

错误在您的 if 语句中。前段时间有同样的错误。我注意到在我的三元运算符中，我的代码行之间用逗号分隔，改为使用 if 语句仍然有同样的错误。

我通过分隔表达式并给每个表达式单独的 if 语句（也适用于三元运算符）来纠正它，但最后，我有太多冗余代码......很烦人。从那以后没有找到任何解决方案

【讨论】：

【解决方案10】：

首先，您必须在函数中的父 div 标记之前至少有一个“返回”，如下所示

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

或者，您可以在一行中使用箭头函数：

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

在这种情况下"return" 不是强制性的。

其次，你应该使用“条件（三元）运算符”。

【讨论】：