Обновление состояния при изменении импортируемой переменной с помощью перехватчиков реакции

Question

У меня есть компонент панели поиска и компонент каталога. Компонент Каталог содержит разные карточки. В зависимости от того, что набрано в поле ввода компонента панели поиска, я хочу отображать разные карточки.

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

Я могу импортировать значение в свой компонент Каталога, но, к сожалению, я не могу понять, как я могу определить, изменилось ли импортированное значение Я могу искать снова?

Я нашел несколько способов сделать это с классами, но вместо этого я хотел бы использовать хуки. Я немного поэкспериментировал с useEffect, но это не сработало.

Спасибо за вашу помощь!

Это мой код в компоненте панели поиска:

import React, { useState } from 'react';

let input = "";

function Search() {
  const [value, setValue] = useState(input);

  function onSearch(e) {
    setValue(e.target.value);
    input = value;
  }

  return(
    <form className="searchForm">
      <input className="search" type="text" name="search" autoComplete="off" placeholder="zoeken" value={value} onChange={onSearch}/> </form>
  );
}


export { Search, input };

А это код в моем Каталоге

import React, { useState, useEffect } from 'react';
import {input} from "./search";
// other imports

function Catalog(props){
  //get cards code and fuse code
   
  const [query, setQuery] = useState(input);
  
  function inputHasChanged(){ //function that can tell if the imported input variable changed
    setQuery(input); //update query and rerender cards
  }

  const results = fuse.search(query)
  const searchedCards = query ? results.map(card => card.item) : cards;
  
  //other code

 
  return(
    <div>
       //render the SearchedCards
    </div>
  );
}



export {Catalog};

Решение:

код в поиске:

import React, { useState } from 'react';


const Search = ({ searching }) => {
  const [value, setValue] = useState("");

  function submit(e){
    setValue(e.target.value);
    searching(value);
  }

  return (
    <form className="searchForm">
      <input
        className="search"
        type="text" name="search"
        autoComplete="off"
        placeholder="zoeken"
        value={value}
        onChange={submit}
      />
    </form>
  );
};

export { Search };

Поиск - это дочерний элемент баннера:

import React, {useState, useEffect} from 'react';
import {Search} from './search';
import Header from './Header';
import Overzicht from './Overzicht';


const Banner = ({ search }) => {
  const [value, setValue] = useState("");

  useEffect(() => {
    search(value);
  },[search, value]);

  return(
    <div className="banner">
      <Header />
      <Search searching={value => setValue(value)} />
      <Overzicht />
    </div>
  );
};


export default Banner;

Баннер - это дочерний элемент дома, который также содержит каталог:

import React,  { useState } from "react";
import Banner from './banner';
import {Catalog} from './Catalog';

function Home(){
  const [input, setInput] = useState("");

  return(
    <div>
      <section id="banner">
        <Banner search={input => setInput(input)}/>
      </section>
      <section id="overzicht">
        <Catalog search={input} />
      </section>
    </div>
  );
}

export default Home;

И теперь я могу просто позвонить

props.search

в каталог

Answer 1

Pu sh общее состояние, query, до общего предка и по мере необходимости передают его дочерним и дочерним компонентам. Таким образом, они могут «наблюдать» за изменениями, передавая им новые свойства.

Ниже представлена ​​упрощенная версия структуры, которая будет работать:

function Catalog({ query }) {
  const [results, setResults] = useState(null);

  useEffect(() => {
    // If `fuse.search` is asynchronous then you might need to debounce
    // these queries and/or cancel old queries. If a user types "foo",
    // a query is kicked off, and then they finish typing "food", you
    // want to cancel the query for "foo" because the results will no
    // longer be relevant.
    const results = fuse.search(query);
    setResults(results);
  }, [query])

  return (
    <div />
  );
}

function Search({ query, setQuery }) {
  return (
    <input onChange={setQuery} value={query} /> 
  )
}

function App() {
  const [query, setQuery] = useState("");

  return (
    <>
      <Search query={query} setQuery={setQuery} />
      <Catalog query={query} />
    </>
  );
}

Answer 2

Вы можете использовать useEffect, как указано ниже:

useEffect (() => {// Запишите здесь свой лог c

}, [input]); // он запустится только при изменении ввода