Question

BLUF：我检查了这个类似的 Stack Overflow: React JSX error expected a return value at the end of the arrow function，遵循了建议，仍然有同样的问题

我收到警告 Array.prototype.filter() expects a value to be returned at the end of arrow function，结果我的本地主机服务器无休止地加载。

这是我的代码：

import JSONDATA from './MOCK_DATA.json';
import "./Navbar.css";
import {useState} from 'react'

const Searchbar = () => {
    const [searchTerm, setSearchTerm] = useState('')
    return (
        <div className="Search">
            <input type="text" placeholder="Search..." onChange={event => {setSearchTerm(event.target.value)}}/>
            {JSONDATA.filter((val) => {
                if (searchTerm === "") {
                    return ''
                } else if (val.first_name.toLowerCase().includes(searchTerm.toLowerCase())) {
                    return val
                }

            }).forEach((val, key) => {
                return (
                    <div className="user" key={key}>
                        <p>{val.first_name}</p>
                    </div>
                );
            })}
        </div>
    );
}

export default Searchbar

Answer 1

<块引用>

Array.prototype.filter() 期望在箭头函数结束时返回一个值

错误的意思正是它所说的。您传递给 filter 的函数可能没有返回响应（如果您的 if 条件都不是 true），这是无效的。

此外，传递给 filter 的函数应该返回 true 或 false 响应。 从技术上讲您正在尝试这样做，因为 '' 是 falsy 而对象是 truthy。但这可能不是你想要做的。

如果这是您检查 filter 的条件：

<块引用>

if (val.first_name.toLowerCase().includes(searchTerm.toLowerCase()))

然后只需检查该条件：

JSONDATA.filter(val => val.first_name.toLowerCase().includes(searchTerm.toLowerCase()))

假设这些属性都不是 null 或 undefined，includes() 将返回 true 或 false 值。如果它们可能是 null 或 undefined，您还需要为此添加检查。

此外，您似乎在此处滥用了 forEach。 forEach 用于循环遍历数组以对每个元素执行操作。 map 用于将数组投影到新数组中，转换每个元素。您似乎想要后者，因此将 forEach 替换为 map。

反应：箭头函数返回值时出错

1 个答案: