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

React JS API发布请求

1 个答案: