javascript - React js数组中的警告

Question

我有这个功能

static getDerivedStateFromProps(nextProps, prevState) {
  let { fetching } = nextProps
  const { error } = nextProps

  if (prevState.fetching !== fetching && !fetching) {
    fetching = error
  }
  const userId =
    Object.keys(nextProps.match.params).length > 0
      ? nextProps.match.params[Object.keys(nextProps.match.params)[0]]
      : 'new'
  if (userId !== 'new') {
    const itemUser = nextProps.usersList.filter(item => {
      if (String(item.userid) === userId)
       return item
    })
    return { profileItem: { ...prevState.profileItem, ...itemUser[0] }, index: userId, fetching }
  }
  return { fetching }
}

它可以正常工作并按预期执行，但我想摆脱此警告:

Expected to return a value at the end of arrow function array-callback-return

网上说有问题

const itemUser = nextProps.usersList.filter(item => {

Answer 1

自 filter的回调希望您返回一个 bool 值，您可以将该行重写为:

const itemUser = nextProps.usersList.filter(item => String(item.userid) === userId)

问题存在，因为这个函数:

item => {
    if (String(item.userid) === userId)
         return item
}

如果 item.userid != userId，您当前未返回任何内容，因此它隐式返回 undefined。这是good practice始终返回某物，即使它为 null 或 false。在这种情况下，您的函数按预期工作，因为 filter callback期望一个 bool 值。当您退回商品时，商品为 truthy因此过滤器包括该项目。此外，如果您不返回任何内容，它会隐式返回 undefined，即 falsy , 从而过滤掉该项目。

最后，由于您要退回一件商品，因此理想情况下应该使用 .find()反而。这将防止在找到项目后进行过多的迭代，因为您只会查找一个项目:

const itemUser = nextProps.usersList.find(item => String(item.userid) === userId);
return { profileItem: { ...prevState.profileItem, ...itemUser }, index: userId, fetching }