Question

我将一个对象与其内部的对象进行映射，如下所示：

{props && Object.keys(props).map((each) => {
                            if (each !== 'logo' && each !== 'info' && each !== 'mobin') {
                                return (
                                    <Slide key={each} style={{ height: '200px' }}>
                                        <div
                                            style={{
                                                height: '100%'
                                            }}
                                            onClick={() => handleClick(each)}
                                            className="d-flex justify-content-center align-items-center"
                                        >
                                            <Img
                                                alt="company-logo"
                                                style={{
                                                    width: '140px',
                                                    cursor: 'pointer'
                                                }}
                                                fluid={props[each].childImageSharp.fluid}
                                            />
                                        </div>
                                    </Slide>
                                );
                            }
                        })}

它运行良好，但终端中有一个警告：

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

如何修复预期在箭头函数结束时返回的值？

Answer 1

正如警告所说，map 函数总是期望在每次迭代时返回一个值。只有当 if 语句中的条件为真时，您的函数才会返回某些内容。在所有其他情况下，不返回任何内容。

要解决这个问题，您只需添加一个 else 语句：

if (each !== 'logo' && each !== 'info' && each !== 'mobin') {
    ...
} else {
    return null;
}

另一种选择是从 if 函数中删除 map 并像这样使用 filter 函数：

{props && Object.keys(props)
          .filter(each => each !== 'logo' && each !== 'info' && each !== 'mobin')
          .map(each => {
            return(
              ......
            )})
}

Answer 2

你也可以去掉显式的 if 语句：

{
props &&
    Object.keys(props).map((each) => {
        return (
            each !== 'logo' &&
            each !== 'info' &&
            each !== 'mobin' && (
                <Slide key={each} style={{ height: '200px' }}>
                    <div
                        style={{
                            height: '100%'
                        }}
                        onClick={() => handleClick(each)}
                        className="d-flex justify-content-center align-items-center"
                    >
                        <Img
                            alt="company-logo"
                            style={{
                                width: '140px',
                                cursor: 'pointer'
                            }}
                            fluid={props[each].childImageSharp.fluid}
                        />
                    </div>
                </Slide>
            )
        );
    });

}

如何修复预期在react js中箭头函数警告结束时返回一个值？

2 个答案: