时间戳

首页 > 解决方案 > 如何使用 react-use-fuse？

reactjs - 如何使用 react-use-fuse？

问题描述

任何人都可以提供如何在 reactjs 中使用 react-use-fuse 的完整工作示例吗？

https://www.npmjs.com/package/react-use-fuse

我正在尝试，但在最后一行出现错误

错误：TypeError：Object(...) 不是函数

主要应用代码：

import React, { Component } from 'react'
import MyComponent from './Search'

const customers = [
    {id: 1, name: 'Customer A', email: 'aa@aa.com'},
    {id: 2, name: 'Customer B', email: 'mm@mm.com'}
  ]

export default class App extends Component {
    render() {
        return (
            <div>
                <MyComponent customers={customers} />
            </div>
        )
    }
}

搜索代码：

import React from 'react';
import { useFuse } from 'react-use-fuse';

function MyComponent({customers}){

  // This is Fuse specific options. Read more at
  // https://fusejs.io/#examples
  const options = {
      keys: ["name", "email"]
  }

  // Setup the Hook.
  const { result, search, term } = useFuse({
      data: customers,
      options
  });

  return (
      <div>
          <input
              onChange={e => search(e.target.value)}
              value={term}
              placeholder="Search for a customer..."
          />

          {result.map(customer => (
              <div>
                  {customer.name} - {customer.email}
              </div>
          ))}
      </div>
  )
}

export default MyComponent;

标签： reactjses6-modules

解决方案

useFuse您应该在没有大括号的情况下导入： import useFuse from 'react-use-fuse';. 在库中，钩子是默认导出，在导入代码时不需要大括号。

例子：

import React from 'react';
import useFuse from 'react-use-fuse';

function MyComponent({customers}){
  // This is Fuse specific options. Read more at
  // https://fusejs.io/#examples
  const options = {
      keys: ["name", "email"]
  }

  // Setup the Hook.
  const { result, search, term } = useFuse({
      data: customers,
      options
  });

  return (
      <div>
          <input
              onChange={e => search(e.target.value)}
              value={term}
              placeholder="Search for a customer..."
          />

          {result.map(customer => (
              <div>
                  {customer.name} - {customer.email}
              </div>
          ))}
      </div>
  )
}

export default MyComponent;

有关导入 ES6 默认导出的更多信息，请查看官方文档。

更新

关于导入解决后的其他未定义错误（TypeError: Cannot read property '0' of undefined in Fuse.js） 。react-use-fuse我无法在此CodeSandbox 尝试中重现相同的错误。也许还有其他事情发生。

推荐阅读