Как я могу использовать реагировать-использовать-предохранитель? - PullRequest
Новая
       7

Как я могу использовать реагировать-использовать-предохранитель?

0 голосов
/ 28 апреля 2020

Может ли кто-нибудь предоставить полный рабочий пример того, как использовать реактивный предохранитель в reactjs?

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

Я пытаюсь, но я получаю сообщение об ошибке в последней строке

Ошибка: Ошибка типа: объект (...) не является функцией

Основной код приложения: 

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;

1 Ответ

0 голосов
/ 28 апреля 2020

Вы должны импортировать 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 . Возможно, что-то еще происходит.

...