Javascript-React 如何设置要返回的多个属性？

Question

我正在尝试构建一个搜索框。当你输入它时，它会自动过滤我的 App.js 文件（机器人卡片）。

render() {
        const filteredRobots = this.state.robots.filter(robots => {
            return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase())
        })
        return(
            <div className='tc'>
                <h1>RoboFriends</h1>
                <SearchBox searchChange={this.onSearchChange}/>
                <CardList robots={filteredRobots}/>
            </div>
            )
    }

我有一个单独的 robots.js 文件，其中列出了机器人的属性：

export const robots = [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: 'Sincere@april.biz'
    },

我的过滤方法有效，当我只在其中放入一个属性时。在上面的代码中，我在按名称过滤时进行了说明。我还想包括“电子邮件”属性，这样当我在搜索字段中输入时，它也会按电子邮件进行过滤，而不仅仅是名称。

先谢谢了，这是我的第一个post，不好意思不清楚，我最近才开始学习

Answer 1

filter 方法直接传递数组项。

const searchedString = this.state.searchfield.toLowerCase()
const filteredRobots = robots.filter(robotItem => robotItem.name.toLowerCase().includes(searchedString) || robotItem.username.toLowerCase().includes(searchedString) )

mdn docs

中有关过滤方法的更多信息

Answer 2

您可以将对象字段组合成一个字符串并使用它而不是使用 name

const filteredRobots = this.state.robots.filter(robot => {
      return Object.values(robot).join(" ").toLowerCase().includes(this.state.searchfield.toLowerCase())
})

现在，所有机器人字段（姓名、用户名、电子邮件、ID）都在您的搜索功能中考虑。

Javascript-React 如何设置要返回的多个属性？

How do you set multiple properties to be returned in Javascript-React?

javascript

return-value

reactjs