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? 

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

我不知道你为什么要在第二个键上添加一个......

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

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

Answer 3

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

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