如何修复预期在反应js中的箭头function警告末尾返回值？

Question

I map an object with objects inside of it like this:

{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>
                                );
                            }
                        })}

It works perfectly but there is a warning in terminal which is:

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

How can I fix the expected to return a value at the end of arrow function?

Answer 1

The map function, as the warning says, is always expected to return a value, at every iteration. Your function returns something only when the condition inside the if statement is true. In all other cases, nothing is returned.

To fix that, you can just add an else statement:

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

Another option is to remove if from within the map function and use the filter function like this:

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

Answer 2

You can also get rid of the explicit if statement:

{
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>
            )
        );
    });

}