React JS API 發布請求

Question

伙計們，我需要幫助來發出 API 搜索請求，該請求應在頁面准備好時完成。 這是 state object：

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

  const apiurl = ....;

這就是我的搜索輸入的實際工作方式：

  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 }
    });
  }

我的組件：

 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>
  );

搜索.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>
  )

結果.js：

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

那么如何在頁面加載時完成搜索請求（例如：超人）？ 謝謝！

Answer 1

您可以使用useEffect鈎子來做到這一點，當一個空數組作為第二個參數傳遞時，這相當於componentDidMount()生命周期方法。 所以修改后的代碼如下所示：

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}
      />
  );
}