React JS API 发布请求

Question

Guys I need help to make an API search request that should be done when page is ready. This is state object:

 const [state, setState] = useState({
    s: "",
    results: [],
    selected: {}
  });

  const apiurl = ....;

This is how my search input actually works:

  const search = (e) => {
    if (e.key === "Enter") {
      axios(apiurl + "&s=" + state.s).then(({data}) => {
        let results = data.Search;
        setState(prevState => {
          return {...prevState, results: results }
        });
      });
    }
  }

  const handleInput = (e) => {
    let s = e.target.value;

    setState(prevState => {
      return { ...prevState, s: s }
    });
  }

My components:

 return (
   <div className='basic'>
     <Header />
     <Search handleInput={handleInput} search={search} />
     <Container>
       <Results results={state.results} openPopup={openPopup} />
       {(typeof state.selected.Title != "undefined") ? <Popup selected={state.selected} closePopup={closePopup} /> : false }
     </Container>
    </div>
  );

Search.js:

function Search ({ handleInput, search}) 
  return (
    <Container bg="dark" variant="dark">
      <section className="searchbox-wrap">
        <input
          type="text"
          placeholder="Поиск фильма"
          className="searchbox"
          onChange={handleInput}
          onKeyPress={search}
        />
      </section>
    </Container>
  )

Results.js:

function Results ({ results, openPopup }) {
  return (
    <section className="results">
      {results.map(result => (  
        <Result key={result.imdbID} result={result} openPopup={openPopup} />
      ))}
    </section>
  );
}

So how can I make search request (for example: Superman) be done when page is loaded? Thank you!

Answer 1

You can do that with useEffect hook, that is equivalent to componentDidMount() lifecycle method when an empty array is passed as a second argument. So modified code would look like the following:

import React, { useState, useEffect, useCallback } from 'react';

function SearchComponent() {
  const [state, setState] = useState({
    s: "Superman",
    results: [],
    selected: {}
  });
  const apiurl = "";

  const makeSearchRequest = useCallback(
    searchString => {
      axios(apiurl + "&s=" + searchString)
        .then(({ data }) => data.Search)
        .then(results => setState(prevState => ({ ...prevState, results })));
    },
    [setState]
  );

  // This will be invoked only on component mount
  useEffect(() => makeSearchRequest(state.s), []);

  const handleInput = useCallback(
    e => {
      e.persist();
      setState(prevState => ({ ...prevState, s: e.target.value }));
    },
    [setState]
  );

  const search = useCallback(
    e => {
      if (e.key === "Enter") {
        makeSearchRequest(state.s);
      }
    },
    [makeSearchRequest, state.s]
  );

  return (
      <input
        type="text"
        value={state.s}
        onChange={handleInput}
        onKeyPress={search}
      />
  );
}