Реакция. js: передача данных между компонентами

Question

Я изучаю Реагирую и пытаюсь не использовать компоненты на основе классов, а реализовать компоненты как функции.

У меня есть простое приложение, которое выполняет запросы к БД. Мои компоненты - это, в основном, Searchbar и DataArray, созданные в App.

Я борюсь с тем, как передать значение, считанное в SearchBar (запрос поля ввода), в функции запроса к БД, которые затем передадут результаты в DataArray. Реквизит не будет работать здесь. Государственный путь к go? Опять же, как я могу прочитать состояние из других компонентов, или я могу?

Что мне здесь не хватает?

Любая помощь приветствуется здесь,

br, Мика

Answer 1

Вот один из способов сделать это с помощью React Hooks. GET_REQUEST зависит от того, какой HTTP-запрос вы хотите сделать.

const SearchBar = () => {
  const [myStateVariable, setMyStateVariable] = useState(null)
  
  const { loading, data } = useQuery(GET_REQUEST, {
    variables: "my_request_param"
  })

  useEffect(() => {
    if(!loading && data) {
      setMyStateVariable(data)
    }
  }, data)

  return (
    !loading && (
      <DataArray propsVariable={myStateVariable} />
    )
  )
}

const DataArray = ({ propsVariable }) => {
  return (
    <div>My variable from request: {propsVariable}<div/>
  )
}

Answer 2

Поскольку вы не поделились каким-либо кодом, это немного сложно объяснить, но я постараюсь изо всех сил.

С введением обработчиков реакции вы можете обрабатывать события в функциональном компоненте. Перейдите по этой ссылке , чтобы получить образец, который я создал.

Чтобы передать результат другому компоненту, я бы рекомендовал встроенную функцию реагирования, называемую контекстом. Вот ссылка на ту же статью.

Это не полное решение, но оно поможет вам в правильном направлении.

Счастливого обучения.