javascript - 在 react 中获取导入函数的未定义值

Question

我根据在搜索框中键入的文本过滤数据。我首先过滤数据然后映射它。我的代码按预期工作，但有一个函数重复，所以我将它放入 util 文件夹，然后在文件中使用它。但问题是我得到的值是 undefined 来自那个 util 函数。

Members.js 之前的代码:

import React from 'react'
import members from '../members.json'

function Member({searchTerm}) {
  return (
    <div>
      {
        members.filter((ele) =>
                ele.first_name
                  .toLowerCase()
                  .includes(searchTerm.toLocaleLowerCase()) ||
                ele.last_name
                  .toLowerCase()
                  .includes(searchTerm.toLocaleLowerCase()))
        .map(ele => {
          return (
            <div key={ele.id}>
              <h1>Name: {ele.first_name} {ele.last_name}</h1>
            </div>
          )
        })
      }
    </div>
  )
}

export default Member

我使用 Utils 的新方法

utils/helper.js:

const searchMembers = (membersArr, searchTerm) => {
  return membersArr.filter(
    (ele) =>
      ele.first_name
        .toLowerCase()
        .includes(searchTerm.toLocaleLowerCase()) ||
      ele.last_name.toLowerCase().includes(searchTerm.toLocaleLowerCase())
  );
}

export { searchMembers }

成员.js

import React from 'react'
import members from '../members.json'
import {searchMembers} from '../utils/helper'

function Member({searchTerm}) {
  const {searchMember} = searchMembers(members, searchTerm)
  console.log('searchMember:', searchMember)      //undefined
  return (
    <div>
      {
        searchMember.map(ele => {
          return (
            <div key={ele.id}>
              <h1>Name: {ele.first_name} {ele.last_name}</h1>
            </div>
          )
        })
      }
    </div>
  )
}

export default Member

对于上述方法，我得到错误 searchMember.filter is not a function。

你们能帮帮我吗？

谢谢

Answer 1

您的searchMembers 方法直接返回过滤后的结果。当你的代码

const {searchMember} = searchMembers(members, searchTerm)

尝试从返回的数据中提取searchMember(通过解构)。

使用

const searchMember = searchMembers(members, searchTerm)