React JS API 发布请求

Question

伙计们，我需要帮助来发出 API 搜索请求，该请求应在页面准备就绪时完成。 这是状态对象：

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

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

那么我怎样才能在页面加载时完成搜索请求（例如：超人）？谢谢！

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