Question

我正在尝试在以下示例代码中的第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错误？

Answer 1

至少从您的代码段和评论中，您没有返回任何内容。

argparse

这不会返回任何内容，您使用大括号包装箭头函数的主体，但没有返回值。

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

另一方面，这两个解决方案返回一个有效的React组件。另请注意，在const def = (props) => <div></div>;内（如@Adam所述），您不能拥有jsx，只能拥有三元运营商。

Answer 2

return语句应放在一行中。要么另一个选择是删除限制HTML语句的大括号。

示例：

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

Answer 3

您必须退货

代替这种方法（这不是正确的方法）

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

尝试

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

或使用return语句

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

Answer 4

您使用功能组件：

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

Answer 5

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

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

Answer 6

期望了一个赋值或函数调用，而是看到了一个表达式。

我在此代码中也遇到类似的错误：

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

要纠正我需要做的就是在圆括号中添加括号

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

Answer 7

在我的情况下，问题出在开关块中带有默认指令的行：

  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: ;

为我工作。

Answer 8

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

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

Answer 9

问题出在您的 if 语句中。前段时间有同样的错误。我注意到在我的三元运算符中，我用逗号将代码行彼此分开，改为使用 if 语句仍然有相同的错误。

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

Answer 10

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

run.cjs

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

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

在这种情况下，const def = (props) => `<div> [some other child div/codes here] </div>` 不是强制性的。

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

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

10 个答案: