反应：在提交上获取数据，而不是在 onChange 上

Posted 2023-02-27

【中文标题】反应：在提交上获取数据，而不是在 onChange 上

【英文标题】：React: Fetch Data onSubmit, not on onChange

【发布时间】：2021-07-10 18:03:13

【问题描述】：

我让这段代码按照我想要的方式运行。但是，它会在每次击键后获取和显示数据。我只希望它在我点击提交时获取一次。

另外，如果我正在做的事情不是“最佳实践”，请告诉我，这样我以后就不会犯愚蠢的错误了。

import React,  useEffect, useState  from "react";

export default function App() 
  const [data, setData] = useState(null);
  const [query, setQuery] = useState("");

  useEffect(() => 
    if (!query) return;

    async function fetchData() 
      const response = await fetch(
        `https://www.omdbapi.com/?apikey=2e8b5857&s=$query`
      );
      const data = await response.json();
      const results = data.Search;
      setData(results);
    

    fetchData();
  , [query]);

  const handleSubmit = (e) => 
    e.preventDefault();
    setQuery(query);
  ;

  return (
    <div
      style=
        margin: 20,
      
    >
      <form onSubmit=handleSubmit>
        <br />
        <label>
          Input Movie:" "
          <input
            type="text"
            placeholder="ex. Harry Potter"
            value=query
            onChange=(e) => 
              setQuery(e.target.value);
            
          />
        </label>
        <input type="submit" value="Submit" onClick=() => setQuery />
      </form>

      data &&
        data.map((movie) => (
          <div key=movie.imdbID>
            <h1>movie.Title</h1>

            <h4>
              movie.Year | movie.imdbID
            </h4>

            <img alt=movie.imdbID src=`$movie.Poster` />
          </div>
        ))
    </div>
  );

【参考方案1】：

在提交函数内部传递useEffect内部的代码，即fetch函数。不使用 useEffect

【讨论】：

就像@Lakshya Thakur 回答的一样

【参考方案2】：

由于您只希望在submit 之后使用它，因此您可以使用[query] 跳过useEffect，并在handleSubmit 中复制相同的逻辑，如下所示：-

import React,  useEffect, useState  from "react";

export default function App() 
  const [data, setData] = useState(null);
  const [query, setQuery] = useState("");


  const handleSubmit = (e) => 
    e.preventDefault();
    if (!query) return;

    async function fetchData() 
      const response = await fetch(
        `https://www.omdbapi.com/?apikey=2e8b5857&s=$query`
      );
      const data = await response.json();
      const results = data.Search;
      setData(results);
    
    fetchData();
  ;

  return (
    <div
      style=
        margin: 20,
      
    >
      <form onSubmit=handleSubmit>
        <br />
        <label>
          Input Movie:" "
          <input
            type="text"
            placeholder="ex. Harry Potter"
            value=query
            onChange=(e) => 
              setQuery(e.target.value);
            
          />
        </label>
        <input type="submit" value="Submit"/>
      </form>

      data &&
        data.map((movie) => (
          <div key=movie.imdbID>
            <h1>movie.Title</h1>

            <h4>
              movie.Year | movie.imdbID
            </h4>

            <img alt=movie.imdbID src=`$movie.Poster` />
          </div>
        ))
    </div>
  );

这是代码框：-

【讨论】：

谢谢！所以在这种情况下useEffect 没有真正的用处？

是的，不在这个用例中