React 代码中的 ESLint 无返回分配和无参数重新分配错误

Question

我在 React App 中有这段代码来加载我的聊天消息：

  const chatBubbles = dummyData.map((obj, i = 0) => {

    <div className={`${classes.bubbleContainer} ${obj.direction}`} key={i}>

      <div key={(i += 1)} className={classes.bubble}>

        <div className={classes.button}>{obj.message}</div>

      </div>

    </div>;

  });

  return <div className={classes.container}>{chatBubbles}</div>;

这是可行的，但我在 ESLint 中遇到两个错误，我不知道如何修复它

  error  Expected to return a value in arrow function                           array-callback-return

  error  Expected an assignment or function call and instead saw an expression  no-unused-expressions

  error  Assignment to function parameter 'i'                                   no-param-reassign

我怎样才能重写这个代码片段以便我的 Eslint 能够接受？

Answer 1

第一个问题：没有理由设置默认值！const chatBubbles = dummyData.map((obj, i = 0) => { <-- there should not be a `= 0`第二个问题：区块内不返回const chatBubbles = dummyData.map((obj, i = 0) => { <-- there { should be a ( <div/> ) or { return (<div/>) }第三个问题：由map设置的递增索引(i += 1) <-- Why are you increasing the variable i?&nbsp;const chatBubbles = dummyData.map((obj, i) => (&nbsp; <div className={`${classes.bubbleContainer} ${obj.direction}`} key={i}>&nbsp; &nbsp; <div key={(i + 1)} className={classes.bubble}>&nbsp; &nbsp; &nbsp; <div className={classes.button}>{obj.message}</div>&nbsp; &nbsp; </div>&nbsp; </div>;));return <div className={classes.container}>{chatBubbles}</div>;我不知道你为什么要在第二个键上添加一个......

Answer 2

也许尝试这样做：&nbsp; &nbsp; const chatBubbles = dummyData.map((obj, i) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className={`${classes.bubbleContainer} ${obj.direction}`} key={i}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={(i + 1)} className={classes.bubble}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={classes.button}>{obj.message}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>;&nbsp; &nbsp; )});return <div className={classes.container}>{chatBubbles}</div>;error&nbsp; Expected an assignment or function call and instead saw an expression并且error&nbsp; Expected to return a value in arrow function- 你需要从地图回调中返回一些东西error&nbsp; Assignment to function parameter 'i'- 你不应该重新分配i （i += 1更改为i + 1）

Answer 3

i在数组上使用该函数时，不需要预先分配map()。将第一行替换为：&nbsp;&nbsp;const&nbsp;chatBubbles&nbsp;=&nbsp;dummyData.map((obj,&nbsp;i)&nbsp;=>&nbsp;{