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

IT技术 reactjs jsx
2021-04-07 01:27: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 错误吗？

6个回答

你没有返回任何东西，至少从你的片段和评论中。

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

这不会返回任何内容，您正在用花括号包裹箭头函数的主体，但没有返回值。

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

另一方面，这两个解决方案正在返回一个有效的 React 组件。还请记住，在您的内部jsx（如@Adam 所述），您只能拥有if ... else ...三元运算符。

添加return以<Redirect to='/home'>解决我的问题
2021-05-27 01:27:21
然后试试 const def = props => (<div></div>);
2021-06-02 01:27:21
再次感谢。它不会显示错误，但我得到PropName is missing in props validation了它里面的所有专业人士。知道为什么吗？
2021-06-02 01:27:21
是的，您需要在 prop 验证中添加您在组件中使用的每个 prop。您可能想查看文档，您似乎缺少 React 的许多关键基础知识。facebook.github.io/react/docs/typechecking-with-proptypes.html
2021-06-03 01:27:21
谢谢。如果我这样做，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
2021-06-16 01:27:21

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

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

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

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

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

你必须返回一些东西

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

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

尝试

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

或使用 return 语句

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

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

例子：

return posts.map((post, index) =>
    <div key={index}>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
);
这对我有用。我收到了同样的消息，因为我有一个 .map 并且我使用 {} 而不是 () 来返回组件/jsx 谢谢！
2021-06-13 01:27:21

可能的方法是（确保您可以将数组声明更改为从 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>
  )
}
其它你可能感兴趣的问题
上一篇ReactJs CreateClass 不是函数 下一篇React：哪个是推荐的箭头或正常功能？