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

【问题标题】：ESLint no-return-assign and no-param-reassign error in React codeReact 代码中的 ESLint no-return-assign 和 no-param-reassign 错误
【发布时间】：2020-12-16 19:38:33
【问题描述】：

我在 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

如何重写这段代码 sn-p 以便我的 Eslint 接受？

【问题讨论】：

您是否阅读了文档中的相关规则页面？他们都有根据规则的有效和无效代码的示例。
@jonrsharpe 是的，我读过，但我不明白在这种情况下该怎么做
地图没有返回任何东西......

标签： javascript reactjs rxjs eslint

【解决方案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?

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

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

【讨论】：

【解决方案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 - 你需要从地图回调中返回一些东西

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

【讨论】：

【解决方案3】：

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

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

【讨论】：