Question

我有此代码。

{
  Object.keys(_.get(order, "customer", {})).map((key) => {
    if (key !== "defaultOption" && customer[key] !== "") {
      return (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    }
  });
}

并处于警告之下

  Line 885:96:  Expected to return a value at the end of arrow function  array-callback-return

我知道是因为我在if函数中使用了map语句。那么，如何消除错误？

Answer 1

return在if语句后的（即使它是一个空字符串）。

之后，您可能想将filter这样的值从数组中移出（或者先是filter，而不要使用if）。

Answer 2

ESLint告诉您的是，如果条件为false，则map回调将不返回任何内容，因此map创建的数组将有undefined。这通常是一个错误，而不是您故意做的事情。

该函数是否返回条件为true或false的某些内容。例如，如果条件为假，或者您不希望React为该条目呈现任何内容，则可能返回null。

但是，相反，我可能会先filter，然后再map：

{
  Object.keys(_.get(order, "customer", {}))
  .filter((key) => key !== "defaultOption" && customer[key] !== "")
  .map((key) => (
      <option key={key} value={key}>
        {_.startCase(key)}
      </option>
    )
  )
}

旁注：在上面的;之后，我删除了map(/*...*/)，因为它看起来像是在JSX表达式中。 ;是一个语句终止符，您不能在JSX表达式中使用它。（当然，如果那不是JSX表达式，请忽略该更改，尽管那将意味着代码正在创建从未使用过的option ... :-)）

Answer 3

此问题的根本原因是 return语句位于if条件中 。

这意味着该函数仅在条件为真时才返回。

还必须定义条件为false的行为以解决问题。

这可以通过3种方式实现：

添加过滤器以仅获取地图中的有趣值 （推荐）
添加 else块，以在条件失败时返回内容
或通过在代码块的最后一行添加显式返回。

以下是建议的更改示例：

选项1：添加过滤器以仅获取有趣值的地图（推荐）

Object.keys(_.get(order, "customer", {}))
    .filter( 
        (interestingValue) => (
            interestingValue !== "defaultOption" && 
            customer[interestingValue] !== ""
        ) 
    )
    .map( 
        (key) => (
            <option key={key} value={key}>
                {_.startCase(key)}
            </option>
        )
    )

选项2：添加一个else块

Object.keys(_.get(order, "customer", {}))
    .map( (key) => {
            if (key !== "defaultOption" && customer[key] !== "") {
                return (
                    <option key={key} value={key}>
                        {_.startCase(key)}
                    </option>
                )
            } else {
                return (
                    <div>condition failed</div>
                )
            }            
        }
    )

选项3：在代码段末尾添加明确的回报

Object.keys(_.get(order, "customer", {}))
    .map( (key) => {
            if (key !== "defaultOption" && customer[key] !== "") {
                return (
                    <option key={key} value={key}>
                        {_.startCase(key)}
                    </option>
                )
            }
            return undefined
        }
    )

Answer 4

您必须返回一些内容以便map()使用。您无法使用map()“跳过”值。

尝试返回null，然后应用filter来过滤掉这些空值。

Answer 5

只需在if语句后添加return null。

Answer 6

问题没有# d is a dictionary: d = {'k1':[1,2,3,{'tricky':['oh','man','inception',{'target':[1,2,3,'hello']}]}]} print(d) print("\n") #print the value where key='k1' d1=d['k1'] print(d1) print("\n") #d1 is a list. # print the 4th value of list d1, list's index start with 0. d2=d1[3] print(d2) print("\n") #d2 is a dictionary #print the value where key='tricky' d3=d2['tricky'] print(d3) print("\n") #d3 is list #print the 4th value of list d3. d4=d3[3] print(d4) print("\n") # d4 is dictionary #print the value where key='target' d5=d4['target'] print(d5) print("\n") #d5 is list #print the 4th value of list d5. d6=d5[3] print(d6)，如果条件得到else block

false函数期望某些回报值

map

OR

{
  Object.keys(_.get(order, "customer", {})).map((key) => {
    if (key !== "defaultOption" && customer[key] !== "") {
      return (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    } else { 
        return null;  // <----- You were missing this
    }
  });
}

Answer 7

您可以将其转换为循环。

{
    (()=>{
        let arr=[];
        const keys = Object.keys(_.get(order, "customer", {}));
        for(let key of keys){
            if (key !== "defaultOption" && customer[key] !== "") {
                arr.push(<option key={key} value={key}>
                    {_.startCase(key)}
                </option>)
            }
        }
        return arr;
    })()
}

Answer 8

您需要在map函数中的if语句之外返回值。由于您未这样做，因此eslint会警告您。

{
  Object.keys(_.get(order, "customer", {})).map((key) => {
    if (key !== "defaultOption" && customer[key] !== "") {
      return (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    }
    return null;  // return value here 
  });
}

现在，当条件不匹配时，您可以从map函数中return null，因为react不会呈现空值

预期使用if语句在箭头函数的末尾返回一个值

8 个答案: