在 React 中将数据从一个组件传递到另一个组件的问题

Question

I have a SearchForm component in the header where I fetch data from my API and get the data for my search and I need to use search in my software component to display the software I found.

SearchForm component:

const SearchForm = ({ style }) => {

  const [search, setSearch] = useState('');
  const [shouldFetch, setShouldFetch] = useState(false);

  const handleChange = (e) => {
    setSearch(e.target.value);
  }

  useEffect(() => 

    if (shouldFetch) {

      (async () => {

        const response = await fetch(`http://127.0.0.1:8000/api/software/?search=${search}`);

        const data = await response.json();

        setShouldFetch(false);

      })()

    }

  }, [shouldFetch]);

  const handleClick = () => setShouldFetch(true);

  return (
    <div
      className={styles["search-form"]}
      id={styles["search-form"]}
      style={style}
    >
      <form onKeyDown={OnKeyDown(handleClick)}>
        <input
          type="text"
          placeholder="Enter something..."
          autoComplete="off"
          maxLength="30"
          onChange={handleChange}
        />
        <SearchButton onClick={handleClick} />
        <small>ENTER</small>
      </form>
    </div>
  );
};

export const SearchButton = ({ style, id, onClick }) => {
  return (
    <button
      type="button"
      style={style}
      id={id}
      onClick={onClick}
    >
      <FontAwesomeIcon icon={faSearch} />
    </button>
  );
};

And Softwares component:

const Softwares = () => {

  const [softwares, setSoftwares] = useState([]);
  const [total, setTotal] = useState(null);
  const [totalPages, setTotalPages] = useState(null);
  const [valid, setValid] = useState(false);

  const fetchData = async ({ currentPage }) => {

    const response = await fetch(`http://127.0.0.1:8000/api/software/?p=${currentPage}`);

    const data = await response.json();

    setSoftwares(data.results);
    setTotal(data.count);
    setTotalPages(data.total_pages);
    setValid(true);

  }

  useEffect(() => {
    fetchData({ currentPage: 1 });
  }, []);

  return (
    <>
    {
      valid &&
      <section className={styles.softwares}>
        ...
        {softwares.map(s => (
          <Article key={s.id} pathname={s.id} title={s.title} image={s.image} pubdate={s.pub_date} icon={s.category.parent.img} categoryID={s.category.id} categoryName={s.category.name} dCount={s.counter} content={s.content} />
        ))}
        <Paginator totalPages={totalPages} total={total} onMovePage={fetchData} />
      </section>
    }
    </>
  );
};

I can't use SearchForm in Softwares because in App.js they are "quite distant", I just wouldn't want to turn it all into one component.

Here's how it look like in App.js:

const App = () => {

    ...

    return (

        ...

        <Header />

    <div className="container">
      <div className="row">
        <div id="content" className="left">
          <div className="inner">
            <Switch>
              <Route path="/" exact component={Softwares} />
              <Route path="/software/:id" exact component={SoftwareDetail} />
              <Route path="/category/:id" exact component={CategoryDetail} />
            </Switch>
                    </div>
                </div>
            </div>
        </div>
        
        ...

    );
}

So what should I do?

Answer 1

Actually its a valid approach to move the shared state one component up, its called lifting state, here is the official reference https://reactjs.org/docs/lifting-state-up.html