Реагировать на состояние обновления компонента после поиска по объекту - PullRequest
Новая
       69

Реагировать на состояние обновления компонента после поиска по объекту

1 голос
/ 22 марта 2020

У меня есть объект, который выводится из пакетаactIcons npm https://www.npmjs.com/package/react-icons Я импортирую все из одной из папок с import * as ReactIcons from 'react-icons/fa' Я использую Sanity Studio, я создал текстовый ввод он принимает искомое значение и запускает функцию поиска, которая запускает включение значений из объекта, который я выбрал из папкиactIcons fa, и записывает соответствующие значения. Теперь я хочу взять эти значения и обновить компонент реагирования с помощью useState() Однако, я получаю следующую ошибку Uncaught ReferenceError: setIcon is not defined, и SetIcon - это функция-установщик из массива useState. Вот мой код до сих пор 

import React, { useState } from 'react';
import PropTypes from 'prop-types'
import FormField from 'part:@sanity/components/formfields/default'
import PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'
import * as ReactIcons from 'react-icons/fa'


console.log(ReactIcons);

const createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(String(value)))

const Example = value => {
  const [icon, setIcon] = useState();

  return (
   <div>{icon}</div>
  );
}

const search = value => {
  console.log(value);
    Object.keys(ReactIcons).map(go => {
    if (go.toLowerCase().includes(value) === true){
      console.log(go);
      setIcon(go);
    }
  })
}



class IconPickerCustom extends React.Component{

    static propTypes = {
        value: PropTypes.string,
        onChange: PropTypes.func.isRequired
    };

    render = () =>{
        const {type, value, onChange} = this.props
        return (
          <>
            <FormField label={type.title} description={type.description}>
              <input
                type="text"
                value={value === undefined ? '' : value}
                onChange={event => onChange(createPatchFrom(event.target.value))}
                ref={element => this._inputElement = element}
              />
            </FormField>
            <input
              type="text"
              onChange={event => search(event.target.value)}
            />
            {Object.values(ReactIcons).map(X =>{
              return (
                <>
              <X/>
              </>
              );
            })}
            {console.log(ReactIcons.Fa500Px)}
            <ReactIcons.Fa500Px/>
            <Example/>
          </>
        )
    }
}

export default IconPickerCustom;

1 Ответ

2 голосов
/ 22 марта 2020

React имеет два типа компонентов: компоненты класса и компоненты функции (ранее компоненты без состояния). Хуки используются в компонентах функций, когда вы понимаете, что вам нужно состояние внутри компонента функции, и предпочитаете не преобразовывать его в компонент класса.

Хук useState () позволяет нам добавлять состояние в компонент функции.

Компонент класса 

//initialize state
constructor(props) {
    super(props);
    this.state = {foo: bar};
}

//set state
this.setState({foo: baz});

//read state
this.state.foo;

Компонент функции
(с крюком useState ()) 

//initialize state
const [icon, setIcon] = useState("myInitialValue");

//set state
setIcon("myNewValue");

//read state
{icon}

Это значит Сказано, что у вас уже есть компонент класса, так что вам не нужно здесь использовать хуки. Дайте мне знать, если у вас есть какие-либо вопросы.

...