Eslint 错误将数组传递给函数并在其上使用 map

Question

我收到 linting 错误

Must use destructuring files assignment  react/destructuring-assignment

对于下面的代码

const showFiles = label => (files) =>  
  (   
    <>
      {files.map(({ name }, index) => (
        <Typography key={`${label}-file-${index}`}>{name}</Typography>     
      ))}
    </>
  );

我试过改成这个

const showFiles = label => ({ map }) =>
  (
    <>
      {map(({ name }, index) => (
        <Typography key={`${label}-file-${index}`}>{name}</Typography>
      ))}
    </>
  );

这会使 linting 错误消失，但实际网页出现以下错误。

TypeError: can't convert undefined to object

有什么办法可以解决这个我没有看到的 linting 错误吗？我必须使用 Array.prototypes.map 还是什么？

Answer 1

map 方法想要遍历数组的每个元素。所以让你的回调函数是：

files.map(item => <Typography>{item.name}</Typography>)

Answer 2

ES6 中的 rest 参数和 spread 运算符在这种情况下会很有用。在函数 showFiles 中，将 files 更改为 ...files 意味着该函数需要一个数组类型参数，这提高了可读性和 linting 过程。

例如

const showFiles = label => (...files) => {
    return (   
      <>
      {files.map(({ name }, index) => (
        <Typography key={`${label}-file-${index}`}>{name}</Typography>     
      ))}
    </>
    );
  }

并在调用函数时添加spread运算符

  return (
    <>
      {
        showFiles('fileLabel')(...[
         {name:'a'},
         {name:'b'}
        ])
      }
      
    </>
  );

Answer 3

我最终将其更改为

const showFiles = label => field => (
  <>
    {Array.prototype.map.call(field, ({ name }, index) => (
      <Typography key={`${label}-file-${index}`}>{name}</Typography>
    ))}
  </>
)

有效，linting 错误消失。

Eslint 错误将数组传递给函数并在其上使用 map

Eslint error went passing array into function and using map on it

javascript

reactjs

eslint