React 代码中的 ESLint no-return-assign 和 no-param-reassign 错误

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

在数组上使用 map() 函数时不需要预先分配 i。将第一行替换为：

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

Answer 2

也许可以尝试这样做：

    const chatBubbles = dummyData.map((obj, i) => {
    return (
        <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>;

error Expected an assignment or function call and instead saw an expression 和 error Expected to return a value in arrow function - 你需要 return 来自地图回调的东西

error Assignment to function parameter 'i' - 你不应该重新分配 i (i += 1改为i + 1)

Answer 3

第一期：没理由设置默认值！

const chatBubbles = dummyData.map((obj, i = 0) => { <-- there should not be a `= 0`

第二期：块内没有return

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?

const chatBubbles = dummyData.map((obj, i) => (
  <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>;

我不确定你为什么要在第二个键中添加一个...

React 代码中的 ESLint no-return-assign 和 no-param-reassign 错误

ESLint no-return-assign and no-param-reassign error in React code

javascript

rxjs

reactjs

eslint